<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"flat"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="webpack 项目管理工具学习日志二〇二〇年五月二十二日 二〇二〇年五月二十四日  项目构建工具前端工程化——构建工具选型：grunt、gulp、webpack - 前端 - 掘金 VSCode 插件webpack">
<meta property="og:type" content="article">
<meta property="og:title" content="webpack">
<meta property="og:url" content="http://yoursite.com/2020/03/29/%E5%89%8D%E7%AB%AF/%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA/webpack/index.html">
<meta property="og:site_name" content="heweiliang blog">
<meta property="og:description" content="webpack 项目管理工具学习日志二〇二〇年五月二十二日 二〇二〇年五月二十四日  项目构建工具前端工程化——构建工具选型：grunt、gulp、webpack - 前端 - 掘金 VSCode 插件webpack">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/05/15/hSXd6A4kcICFTUE.jpg">
<meta property="article:published_time" content="2020-03-29T11:38:31.070Z">
<meta property="article:modified_time" content="2020-06-27T02:22:32.741Z">
<meta property="article:author" content="heweiliang">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="webpack">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/05/15/hSXd6A4kcICFTUE.jpg">

<link rel="canonical" href="http://yoursite.com/2020/03/29/%E5%89%8D%E7%AB%AF/%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA/webpack/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>webpack | heweiliang blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="heweiliang blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">heweiliang blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="fa fa-fw fa-sitemap"></i>站点地图</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yourname" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/03/29/%E5%89%8D%E7%AB%AF/%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA/webpack/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          webpack<a href="https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name_posts/%E5%89%8D%E7%AB%AF/%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA/webpack.md" class="post-edit-link" title="编辑" rel="noopener" target="_blank"><i class="fa fa-pencil"></i></a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-03-29 19:38:31" itemprop="dateCreated datePublished" datetime="2020-03-29T19:38:31+08:00">2020-03-29</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-27 10:22:32" itemprop="dateModified" datetime="2020-06-27T10:22:32+08:00">2020-06-27</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/webpack/" itemprop="url" rel="index"><span itemprop="name">webpack</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>33k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>30 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="webpack-项目管理工具"><a href="#webpack-项目管理工具" class="headerlink" title="webpack 项目管理工具"></a>webpack 项目管理工具</h1><h2 id="学习日志"><a href="#学习日志" class="headerlink" title="学习日志"></a>学习日志</h2><p>二〇二〇年五月二十二日</p>
<p>二〇二〇年五月二十四日</p>
<p><img src="https://i.loli.net/2020/05/15/hSXd6A4kcICFTUE.jpg" alt="a90ns-z8nal"></p>
<h2 id="项目构建工具"><a href="#项目构建工具" class="headerlink" title="项目构建工具"></a>项目构建工具</h2><p><a href="https://juejin.im/entry/5b5724d05188251aa01647fd" target="_blank" rel="noopener">前端工程化——构建工具选型：grunt、gulp、webpack - 前端 - 掘金</a></p>
<h2 id="VSCode-插件"><a href="#VSCode-插件" class="headerlink" title="VSCode 插件"></a>VSCode 插件</h2><h4 id="webpack"><a href="#webpack" class="headerlink" title="webpack"></a>webpack</h4><p>使用babel transpiling (ES6)创建一个最小的webpack配置文件。</p>
<p>使用</p>
<p>启动命令面板(f1)并查找Webpack Create。这将:</p>
<p>用babel置换创建一个webpackage .config.js文件。ext查找app或src文件夹来设置入口点。和dist或out for bundle path。</p>
<p>更新项目计划。json与babel和es2015 libs。</p>
<p>默认情况下，如果找不到文件夹，将使用app和dist文件夹。</p>
<h4 id="webpack-snippets"><a href="#webpack-snippets" class="headerlink" title="webpack snippets"></a>webpack snippets</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">wpstart   <span class="comment">// Build an empty webpack configuration content.</span></span><br><span class="line">wprequire <span class="comment">// Require webpack lib.</span></span><br><span class="line">wprex     <span class="comment">// Require Extract Plugin.</span></span><br><span class="line">wprule    <span class="comment">// Add a new loader</span></span><br><span class="line">wpochunk  <span class="comment">// Generate webpack.optimize.CommonsChunkPlugin code.</span></span><br><span class="line">wpougf    <span class="comment">// Generate webpack.optimize.UglifyJsPlugin code.</span></span><br><span class="line">wpodef    <span class="comment">// Generate webpack.DefinePlugin code.</span></span><br><span class="line">wpoex     <span class="comment">// Generate ExtractTextPlugin code.</span></span><br></pre></td></tr></table></figure>





<p>Babel JavaScript</p>
<p>BaBel</p>
<h2 id="相关阅读"><a href="#相关阅读" class="headerlink" title="相关阅读"></a>相关阅读</h2><p><a href="https://juejin.im/post/5a5f3513f265da3e5133239a" target="_blank" rel="noopener">webpack使用教程</a></p>
<p><a href="https://juejin.im/post/5d2fd19be51d4576bc1a0eb0" target="_blank" rel="noopener">Webpack基本使用</a></p>
<p><a href="https://juejin.im/post/5d031b2ae51d454d544abf43" target="_blank" rel="noopener">NPM你真的会吗？</a></p>
<p><a href="https://juejin.im/post/5d08d3d3f265da1b7e103a4d" target="_blank" rel="noopener">前端工程化：你所需要的npm知识储备都在这了 </a></p>
<p><a href="https://juejin.im/entry/5b5724d05188251aa01647fd" target="_blank" rel="noopener">前端工程化——构建工具选型：grunt、gulp、webpack - 前端 </a></p>
<p><a href="https://blog.csdn.net/ShiMengRan107/article/details/101761922" target="_blank" rel="noopener">JSON文件内容加注释的几种方法</a></p>
<h2 id="Grunt、Gulp、webpack"><a href="#Grunt、Gulp、webpack" class="headerlink" title="Grunt、Gulp、webpack"></a>Grunt、Gulp、webpack</h2><p><a href="https://www.gruntjs.net/" target="_blank" rel="noopener">Grunt: JavaScript 世界的构建工具 | Grunt 中文网</a></p>
<p><a href="https://www.gulpjs.com.cn/" target="_blank" rel="noopener">gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网</a></p>
<p><a href="https://www.webpackjs.com/" target="_blank" rel="noopener">webpack 中文文档 | webpack 中文网</a></p>
<h2 id="cnpm-、-npm、-nvm、-yarn-、nrm-命令工具"><a href="#cnpm-、-npm、-nvm、-yarn-、nrm-命令工具" class="headerlink" title="cnpm 、 npm、 nvm、 yarn 、nrm 命令工具"></a>cnpm 、 npm、 nvm、 yarn 、nrm 命令工具</h2><blockquote>
<p>nvm:    Node.js版本控制 nvm version</p>
<p>npm:     Node.js 官方提供的包管理工具 npm -v</p>
<p>nrm :    npm镜像管理工具  (cnpm:     淘宝的npm 镜像的加速)  nrm -V</p>
<p>yarn : facebook 的一款与npm 功能相似的包管理工具</p>
<p><a href="https://classic.yarnpkg.com/zh-Hans/" target="_blank" rel="noopener">Yarn</a>  yarn –version</p>
</blockquote>
<h2 id="Node-js的安装"><a href="#Node-js的安装" class="headerlink" title="Node.js的安装"></a>Node.js的安装</h2><h3 id="node-js-安装"><a href="#node-js-安装" class="headerlink" title="node.js 安装"></a>node.js 安装</h3><ul>
<li>第一种直接安装</li>
<li><a href="https://github.com/coreybutler/nvm-windows/releases" target="_blank" rel="noopener">第二种nvm node版本管理工具（推荐）</a></li>
<li><a href="https://cloudintheking.github.io/2018/07/12/windows%E4%B8%8B%E5%AE%89%E8%A3%85nvm%E5%8F%8Anrm/" target="_blank" rel="noopener">windows下安装nvm及nrm | fatboa</a></li>
</ul>
<h4 id="settings-txt文件的配置"><a href="#settings-txt文件的配置" class="headerlink" title="settings.txt文件的配置"></a>settings.txt文件的配置</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">root: D:\SoftWare\NodeJs\nvm &#x2F;&#x2F; nvm node版本控制的软件的位置</span><br><span class="line">path: D:\SoftWare\NodeJs\nodejs &#x2F;&#x2F;当前使用的node的位置</span><br><span class="line">arch: 64 </span><br><span class="line">proxy: none</span><br><span class="line">node_mirror: http:&#x2F;&#x2F;npm.taobao.org&#x2F;mirrors&#x2F;node&#x2F;</span><br><span class="line">npm_mirror: https:&#x2F;&#x2F;npm.taobao.org&#x2F;mirrors&#x2F;npm&#x2F;</span><br></pre></td></tr></table></figure>

<h4 id="环境变量的配置"><a href="#环境变量的配置" class="headerlink" title="环境变量的配置"></a>环境变量的配置</h4><p>配置nvm和Node.js环境变量</p>
<ul>
<li>NVM_HOME:D:\SoftWare\NodeJs\nvm （node版本控制软件nvm 的位置）</li>
<li>NVM_SYMLINK: D:\SoftWare\NodeJs\nodejs  （node.js的位置 符号链接）</li>
</ul>
<blockquote>
<p>环境变量的作用path 路径 可以在终端使用全局的作用命令</p>
</blockquote>
<p>nodemon</p>
<p><a href="https://juejin.im/post/5b5005f7f265da0f66401fe7" target="_blank" rel="noopener">nodemon使用简介 - 掘金</a></p>
<h3 id="安装错误"><a href="#安装错误" class="headerlink" title="安装错误"></a>安装错误</h3><blockquote>
<p>解决方法一：</p>
<p>nvm不能安装在programs files，因为空格问题<br>exit status 1: ‘C:\Program’ �����ڲ����ⲿ���Ҳ���ǿ����еĳ���<br>���������ļ���</p>
<p>可以通过在nvm根目录将program files替换为 progra<del>1，如下：<br>root: C:\progra</del>1\nvm<br>path: C:\progra~1\nodejs</p>
<p>解决方法二：</p>
<p>更换没有空格的安装目录</p>
</blockquote>
<h3 id="nvm常用的命令"><a href="#nvm常用的命令" class="headerlink" title="nvm常用的命令"></a>nvm常用的命令</h3><ul>
<li>nvm list 查看当前安装的Node.js所有版本</li>
<li>nvm install 版本号 安装指定版本的Node.js nvm install latest 最新版本  nvm install <a href="mailto:node@13.5.0">node@13.5.0</a></li>
<li>nvm uninstall 版本号 卸载指定版本的Node.js</li>
<li>nvm use 版本号 选择指定版本的Node.js nvm use node12.16.3</li>
</ul>
<p><a href="https://github.com/nodejs/node" target="_blank" rel="noopener">nodejs/node: Node.js JavaScript runtime</a></p>
<h4 id="node-版本"><a href="#node-版本" class="headerlink" title="node 版本"></a>node 版本</h4><p><a href="https://nodejs.org/zh-cn/download/releases/" target="_blank" rel="noopener">以往的版本 | Node.js</a></p>
<p><a href="https://segmentfault.com/a/1190000011368506" target="_blank" rel="noopener">(…) 版本命名及限定规则详解 - 个人文章 - SegmentFault 思否</a> </p>
<blockquote>
<p>语义化版本命名规则</p>
<p>[name].x.y.z-[state]</p>
<p>x (主版本号(major))，y(次版本号(minor))，z(修订号(patch))非负整数</p>
<ul>
<li><code>0.y.z</code> 表示开发阶段，一切可能随时改变，非稳定版。</li>
<li><code>1.0.0</code> 界定此版本为初始稳定版，后面的一切更新都基于此版本进行修改。</li>
<li><code>a(α或a    alpha 版),b（β或b    beta 版）,rc（rc    Release Candidate）β或b    beta 版</code> 分别表示 内测,公测,发行状态</li>
</ul>
</blockquote>
<h2 id="NPM-包管理工具"><a href="#NPM-包管理工具" class="headerlink" title="NPM 包管理工具"></a>NPM 包管理工具</h2><p><a href="https://www.npmjs.cn/" target="_blank" rel="noopener">npm 中文文档 | npm 中文网</a></p>
<p><a href="https://www.npmjs.com/" target="_blank" rel="noopener">npm | build amazing things</a></p>
<p><a href="https://juejin.im/post/5de4856051882516e524b566" target="_blank" rel="noopener">npm命令详解 </a></p>
<p><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html" target="_blank" rel="noopener">npm 常用命令详解 </a></p>
<p>NPM(Node Package Manager)是Node.js 官方提供的包管理工具，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。</p>
<blockquote>
<ul>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-install" target="_blank" rel="noopener">npm install 安装模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-uninstall" target="_blank" rel="noopener">npm uninstall 卸载模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-update" target="_blank" rel="noopener">npm update 更新模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-outdated" target="_blank" rel="noopener">npm outdated 检查模块是否已经过时</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-ls" target="_blank" rel="noopener">npm ls 查看安装的模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-init" target="_blank" rel="noopener">npm init 在项目中引导创建一个package.json文件</a> -y</li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-help" target="_blank" rel="noopener">npm help 查看某条命令的详细帮助</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-root" target="_blank" rel="noopener">npm root 查看包的安装路径</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-config" target="_blank" rel="noopener">npm config 管理npm的配置路径</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-cache" target="_blank" rel="noopener">npm cache 管理模块的缓存</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-start" target="_blank" rel="noopener">npm start 启动模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-stop" target="_blank" rel="noopener">npm stop 停止模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-restart" target="_blank" rel="noopener">npm restart 重新启动模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-test" target="_blank" rel="noopener">npm test 测试模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-version" target="_blank" rel="noopener">npm version 查看模块版本</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-view" target="_blank" rel="noopener">npm view 查看模块的注册信息</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-adduser" target="_blank" rel="noopener">npm adduser 用户登录</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-publish" target="_blank" rel="noopener">npm publish 发布模块</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-access" target="_blank" rel="noopener">npm access 在发布的包上设置访问级别</a></li>
<li><a href="https://www.cnblogs.com/PeunZhang/p/5553574.html#npm-package.json" target="_blank" rel="noopener">npm package.json文件的语法</a></li>
</ul>
</blockquote>
<blockquote>
<p>与npm 命令相关的两个 node_module 和 package.json</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init    //生成package.json文件</span><br><span class="line">npm init -y //生成默认的package.json文件</span><br></pre></td></tr></table></figure>

<p>安装：全局安装与本地安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">npm install express -g // 全局安装</span><br><span class="line">npm install express  // 本地安装 安装模块到项目目录下</span><br><span class="line">npm install -save moduleName // dependencies(部署环境)</span><br><span class="line">// -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。</span><br><span class="line">npm install -save-dev moduleName  // devDependencies(开发环境) </span><br><span class="line">// -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。</span><br><span class="line">npm install gulp --save-optional 或 npm install gulp -O //-O, --save-optional 安装包信息将加入到optionalDependencies（可选阶段的依赖）</span><br></pre></td></tr></table></figure>

<blockquote>
<p>Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架，为 Web 和移动应用程序提供一组强大的功能。</p>
</blockquote>
<p>安装不同的版本</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install moduleName@lastest 最新版本</span><br><span class="line">npm install moduleName@版本号</span><br></pre></td></tr></table></figure>

<p>查看npm 的版本</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm v</span><br></pre></td></tr></table></figure>

<p>查看所有模块的版本</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm version</span><br></pre></td></tr></table></figure>

<p>npm install 命令默认会安装 package.json 中 dependencies 字段和 devDependencies 字段中的所有模块，</p>
<p>如果使用 –production 参数，可以只安装 dependencies （生产环境的依赖）字段的模块。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install --production</span><br><span class="line"><span class="comment"># 或者</span></span><br><span class="line">NODE_ENV=production npm install</span><br></pre></td></tr></table></figure>

<p>添加–only=dev安装项目所需依赖时，只有devDependencies字段中的依赖包会被安装，dependencies字段中的依赖包不会被安装。与添加–production的效果刚好相反。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --only=dev</span><br></pre></td></tr></table></figure>

<p>npm install 也支持直接输入Github代码地址</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install  git://github.com/package/path.git// git的地址</span><br></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>模式</th>
<th>可通过 require 使用</th>
<th>注册 PATH</th>
<th>安装目录</th>
</tr>
</thead>
<tbody><tr>
<td>本地模式</td>
<td>是</td>
<td>否</td>
<td>当前项目的 node_modules 子目录</td>
</tr>
<tr>
<td>全局模式</td>
<td>否（命令行里使用）</td>
<td>是</td>
<td>安装在node软件的安装目录下</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>npm命令</th>
<th>安装模块位置</th>
<th>package.json</th>
<th>npm install 初始化项目时不会下载模块</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>npm install moduleName</td>
<td>项目node_modules目录</td>
<td><code>不会将模块依赖写入devDependencies或dependencies 节点</code></td>
<td>不会</td>
<td>主要作用是安装配置好package.json文件中的相关依赖</td>
</tr>
<tr>
<td>npm install -g moduleName</td>
<td>全局</td>
<td><code>不会将模块依赖写入devDependencies或dependencies 节点</code></td>
<td>不会</td>
<td></td>
</tr>
<tr>
<td>npm install moduleName  -save//简写：npm install moduleName -S</td>
<td>项目node_modules目录</td>
<td>会将模块依赖写入dependencies 节点</td>
<td>下载到项目目录下</td>
<td>运行npm install –production或者注明NODE_ENV变量值为production时，<strong>会</strong>自动下载模块到node_modules目录中。</td>
</tr>
<tr>
<td>npm install  moduleName -save-dev// 简写: npm install moduleName -D</td>
<td>项目node_modules目录</td>
<td>. 会将模块依赖写入devDependencies 节点</td>
<td>下载到项目目录下</td>
<td>运行npm install –production或者注明NODE_ENV变量值为production时，<strong>不会</strong>自动下载模块到node_modules目录中</td>
</tr>
</tbody></table>
<p>卸载模块</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall express //本地模块</span><br><span class="line">npm uninstall -g &lt;package&gt; //全局模块 （一般都是一些工具）</span><br><span class="line">npm uninstall 模块：删除模块，但不删除模块留在package.json中的对应信息</span><br><span class="line">npm uninstall 模块 --save 删除模块，同时删除模块留在package.json中dependencies下的对应信息</span><br><span class="line">npm uninstall 模块 --save-dev 删除模块，同时删除模块留在package.json中devDependencies下的对应信息</span><br></pre></td></tr></table></figure>

<p>卸载完以后查看一下该模块是否存在</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">npm ls</span><br><span class="line">npm list -g // 查看安装信息</span><br><span class="line">npm list 命令也可以列出单个模块</span><br><span class="line">npm list underscore</span><br><span class="line">npm list &lt;packagename&gt; </span><br><span class="line">PS C:\Users\by\Desktop\jsPang\awesomePos&gt; npm list element-ui</span><br><span class="line">awesome_pos@1.0.0 C:\Users\by\Desktop\jsPang\awesomePos</span><br><span class="line">`-- element-ui@2.2.2</span><br><span class="line">npm list &lt;packagename&gt; -g</span><br></pre></td></tr></table></figure>

<p>更新模块</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm update moduleName(express)</span><br></pre></td></tr></table></figure>

<p>搜索模块</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm search express</span><br></pre></td></tr></table></figure>

<p>模块的具体信息</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm info underscore &#x2F;&#x2F;查看underscore 模块的信息</span><br></pre></td></tr></table></figure>

<p><code>npm run</code></p>
<p>npm 不仅可以用于模块管理，还可以用于执行脚本。package.json 文件有一个 scripts 字段，可以用于指定脚本命令，供 npm 直接调用。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;lint&quot;: &quot;jshint **.js&quot;,</span><br><span class="line">    &quot;test&quot;: &quot;mocha test&#x2F;&quot;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<p>版本号 <code>NPM使用语义版本号来管理代码</code></p>
<p>语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。</p>
<ul>
<li>如果只是修复bug，需要更新Z位。</li>
<li>如果是新增了功能，但是向下兼容，需要更新Y位。</li>
<li>如果有大变动，向下不兼容，需要更新X位。</li>
</ul>
<p>版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如”argv”: “0.0.x”表示依赖于0.0.x系列的最新版argv。</p>
<h2 id="nrm镜像切换地址"><a href="#nrm镜像切换地址" class="headerlink" title="nrm镜像切换地址"></a>nrm镜像切换地址</h2><p><strong>作用：提供一些最常用的NPM包镜像地址，能够让我们快速的切换安装包的服务器地址：</strong></p>
<p>什么是镜像：原本包刚一开始只是存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样：</p>
<ul>
<li>全局安装nrm包npm </li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm i 软件包 -g</span><br><span class="line">npm i nrm -g </span><br><span class="line">npm i cnpm -g</span><br></pre></td></tr></table></figure>

<ul>
<li>查看当前所有可用镜像地址以及当前所使用的镜像源地址</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">nrm ls</span><br></pre></td></tr></table></figure>

<ul>
<li>切换不同的镜像源地址</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">nrm use 镜像源地址</span><br><span class="line">nrm use npm </span><br><span class="line">nrm use taobo</span><br></pre></td></tr></table></figure>

<blockquote>
<p>nrm只是单纯提供几个常用的下载包的URL地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具，都是npm</p>
</blockquote>
<h2 id="总结：webpack基本配置"><a href="#总结：webpack基本配置" class="headerlink" title="总结：webpack基本配置"></a>总结：webpack基本配置</h2><h4 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">npm init -y</span><br><span class="line"></span><br><span class="line">npm i webpack-cli -g</span><br><span class="line">npm i webpack -g</span><br><span class="line"></span><br><span class="line">npm i webpack-cli -D</span><br><span class="line">npm i webpack -D</span><br></pre></td></tr></table></figure>

<h4 id="运行一-命令行-输入完整路径运行-手动"><a href="#运行一-命令行-输入完整路径运行-手动" class="headerlink" title="运行一 命令行  输入完整路径运行 手动"></a>运行一 命令行  输入完整路径运行 手动</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">//1. 运行的第一种方法</span><br><span class="line">webpack .\src\main.js -o .\dist\bundle.js</span><br></pre></td></tr></table></figure>

<h3 id="webpack-dev-server"><a href="#webpack-dev-server" class="headerlink" title="webpack-dev-server"></a>webpack-dev-server</h3><h4 id="运行二：配置webpack-config-js-运行-手动"><a href="#运行二：配置webpack-config-js-运行-手动" class="headerlink" title="运行二：配置webpack.config.js 运行 手动"></a>运行二：配置webpack.config.js 运行 手动</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack-dev-server -D</span><br><span class="line"></span><br><span class="line"><span class="comment">//webpack是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的</span></span><br><span class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="comment">// ES6写法</span></span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> jqurey;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	entry.path.join(_dirname,<span class="string">'./src/main.js'</span>), <span class="comment">//输出路径</span></span><br><span class="line">	output:&#123;</span><br><span class="line">		path:path.join(_dirname,<span class="string">'./dist'</span>),</span><br><span class="line">		filename:<span class="string">'bundle.js'</span> <span class="comment">//指定输出文件的名称</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">webpack</span><br></pre></td></tr></table></figure>

<h4 id="运行三：配置package-json-script-运行-自动运行"><a href="#运行三：配置package-json-script-运行-自动运行" class="headerlink" title="运行三：配置package.json script 运行 自动运行"></a>运行三：配置package.json script 运行 自动运行</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack-dev-server -D</span><br><span class="line"></span><br><span class="line">script:</span><br><span class="line"><span class="string">"dev"</span>: <span class="string">"webpack-dev-server --open --port 3000 --contentBase src --hot"</span></span><br><span class="line">--open</span><br><span class="line">--port 3000</span><br><span class="line">--contentBase 内容</span><br><span class="line">--hot</span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>

<p>webpack-dev-server 中的script</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">"./bist/bundle.js"</span>/&gt;</span><br><span class="line">    </span><br><span class="line">&lt;script src=<span class="string">"./bundle.js"</span> /&gt;</span><br><span class="line">webpack-dev-server应该导入的是加载到内存中的bundle文件，而不是实际磁盘中的bundle.js 文件</span><br></pre></td></tr></table></figure>



<h3 id="html-webpack-plugin-配置index主页"><a href="#html-webpack-plugin-配置index主页" class="headerlink" title="html-webpack-plugin 配置index主页"></a>html-webpack-plugin 配置index主页</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">npm i html-webpack-plugin -D</span><br><span class="line"><span class="comment">// 配置插件，需要在导出的对象中，plugins挂载节点</span></span><br><span class="line"><span class="keyword">var</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>)</span><br><span class="line"></span><br><span class="line">plugins:[</span><br><span class="line"><span class="comment">//创建一个在内存中，生成HTML页面的插件</span></span><br><span class="line">   <span class="keyword">new</span> htmlWebpackPlugin(&#123;</span><br><span class="line">   	template:path.join(_dirname,<span class="string">'./src/index.html'</span>,</span><br><span class="line">   	<span class="comment">//指定模板页面，会根据指定的页面路径，去生成内存中的页面</span></span><br><span class="line">   	filename:<span class="string">'index.html'</span> <span class="comment">//指定生成的页面的名称</span></span><br><span class="line">   &#125;)</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>

<p>重点中</p>
<h4 id="loader-导入其他文件"><a href="#loader-导入其他文件" class="headerlink" title="loader  导入其他文件"></a>loader  导入其他文件</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="keyword">const</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>)</span><br><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">'jquery'</span> </span><br><span class="line"><span class="keyword">import</span> <span class="string">'./css/index.css'</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'boostrap/dist/css/bootstrap.css'</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: path.join(__dirname, <span class="string">'./src/main.js'</span>),</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: path.join(__dirname, <span class="string">'./dist/'</span>),</span><br><span class="line">        filename: <span class="string">'bundle.js'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [</span><br><span class="line">            &#123; <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] &#125;,</span><br><span class="line">            &#123;<span class="attr">test</span>:<span class="regexp">/\.less$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>]&#125;,</span><br><span class="line">            &#123; <span class="attr">test</span>: <span class="regexp">/\.sass$/</span>, <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loaer'</span>, <span class="string">'sass-loader'</span>] &#125;,</span><br><span class="line">            &#123; <span class="attr">test</span>: <span class="regexp">/\.(ttf|eot|svg|woff|woff2)$/</span>, <span class="attr">use</span>: <span class="string">'url-loader'</span> &#125;,</span><br><span class="line">            &#123;<span class="attr">test</span>:<span class="regexp">/\.(jpg|png|gif|bmp|jpeg)$/</span>,<span class="attr">use</span>:<span class="string">'url-loader?limit=7631$name=[name].[ext]'</span>&#125;</span><br><span class="line">            </span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> htmlWebpackPlugin(&#123;</span><br><span class="line">            template: path.join(__dirname, <span class="string">'./src/index.html'</span>),</span><br><span class="line">            filename:<span class="string">'index.html'</span></span><br><span class="line">        &#125;)</span><br><span class="line">    ]</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h2><p><a href="https://zhuanlan.zhihu.com/p/28179203" target="_blank" rel="noopener">Web 字体简介: TTF, OTF, WOFF, EOT $ SVG - 知乎</a></p>
<p>ttf TrueType字型文件</p>
<p>字体格式有太多选择，不幸的是始终<strong>没有一个能在所有的浏览器上通用</strong>。这意味着，你必须使用多种字体的方案来保持<strong>用户跨平台的一致性体验</strong>。</p>
<h2 id="webpack安装的工具"><a href="#webpack安装的工具" class="headerlink" title="webpack安装的工具"></a>webpack安装的工具</h2><ul>
<li>webpack</li>
<li>webpack-cli webpack4.x版本以上要安装webpack-cli</li>
<li>plugin(插件)<ul>
<li>webpack-dev-server</li>
<li>html-webpack-plugin</li>
</ul>
</li>
<li>loader(加载器)<ul>
<li>css、less、scss</li>
<li>image</li>
<li>font</li>
</ul>
</li>
</ul>
<h2 id="webpack-概念的引入"><a href="#webpack-概念的引入" class="headerlink" title="webpack-概念的引入"></a>webpack-概念的引入</h2><h3 id="网页中会引用那些常用的静态资源"><a href="#网页中会引用那些常用的静态资源" class="headerlink" title="网页中会引用那些常用的静态资源"></a>网页中会引用那些常用的静态资源</h3><table>
<thead>
<tr>
<th>静态资源</th>
<th align="center">文件后缀</th>
</tr>
</thead>
<tbody><tr>
<td>JS</td>
<td align="center">.js、.jsx、.coffee、.ts(TypeScript 类 C# 语言)</td>
</tr>
<tr>
<td>CSS</td>
<td align="center">css、less、sass 、(.css、.less、.sass（旧版本）、.scss（新版本）</td>
</tr>
<tr>
<td>Images</td>
<td align="center">.jpg、.png 、.gif、.bmp、.svg</td>
</tr>
<tr>
<td>字体文件(font)</td>
<td align="center">.svg 、.ttf 、 .otf、eot、 .woff、 .woff2</td>
</tr>
<tr>
<td>模板文件</td>
<td align="center">.ejs、.jade、.vue[这是在webpack中定义组件的方式，推荐这么用]</td>
</tr>
</tbody></table>
<h3 id="网页引用静态资源多了以后有什么问题"><a href="#网页引用静态资源多了以后有什么问题" class="headerlink" title="网页引用静态资源多了以后有什么问题"></a>网页引用静态资源多了以后有什么问题</h3><ul>
<li>网页加载速度慢，因为我们要发起很多的二次请求</li>
<li>要处理错综复杂的依赖关系</li>
</ul>
<h3 id="解决问题"><a href="#解决问题" class="headerlink" title="解决问题"></a>解决问题</h3><ol>
<li>合并、压缩、精灵图（CSS Sprites(.精灵)）、图片的Base64编码（适用于小图片）</li>
<li>可以使用之前学过的requireJS、也可以使用webpack解决各个包之间的复杂依赖关系</li>
</ol>
<p>图片的相关优化问题： 减少http请求，减少图片占用的空间</p>
<blockquote>
<p><a href="https://www.cnblogs.com/coco1s/p/4375774.html" target="_blank" rel="noopener">【前端攻略】：玩转图片Base64编码 - ChokCoco - 博客园</a></p>
<p>图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。 节省一个 http 请求</p>
<p><strong>如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新</strong>。</p>
<p><strong>使用base64直接把图片编码成字符串写入CSS文件：</strong></p>
<p>只有 50 字节的2*2的的背景图。将其转化成 base64 编码，只有 100 多个字符，相比一个 http 请求</p>
<p> <strong>使用 Base64 不代表性能优化</strong></p>
<p>是的，使用 Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。</p>
<p> CSS 文件体积的增大意味着什么呢？意味着 CRP 的阻塞。</p>
<p>CRP（Critical Rendering Path，关键渲染路径）：当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我们常常称之为“<strong>关键渲染路径</strong>”。</p>
<p>通俗而言，就是图片不会导致关键渲染路径的阻塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积，CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染，而图片不会。</p>
<p>页面解析 CSS 生成的 CSSOM 时间增加</p>
<p><a href="https://segmentfault.com/a/1190000007686042" target="_blank" rel="noopener">(…) 浅谈 CSS Sprites 雪碧图应用 - 浅谈前端 - SegmentFault 思否</a></p>
<p><strong>使用CssSprites合并为一张大图：</strong></p>
<p><a href="http://www.imooc.com/learn/93" target="_blank" rel="noopener">CSS Sprite(精灵图)雪碧图用法视频教程-慕课网</a></p>
</blockquote>
<h3 id="解决上述的2种解决方案"><a href="#解决上述的2种解决方案" class="headerlink" title="解决上述的2种解决方案"></a>解决上述的2种解决方案</h3><ol>
<li>使用Gulp，是基于task任务的（小巧灵活）</li>
<li>使用Webpack，是基于整个项目进行构建的<ul>
<li>webpack官网</li>
<li>官网的图片介绍webpack打包的过程</li>
<li>借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能</li>
</ul>
</li>
</ol>
<h3 id="webpack目录"><a href="#webpack目录" class="headerlink" title="webpack目录"></a>webpack目录</h3><blockquote>
<p>src 源代码</p>
<p>​    css</p>
<p>​    js</p>
<p>​    images</p>
<p>​    index.html</p>
<p>​    main.js 项目JS入口文件</p>
<p>dist  完成项目，发布完整项目的文件夹</p>
</blockquote>
<h2 id="webpack最基本知识"><a href="#webpack最基本知识" class="headerlink" title="webpack最基本知识"></a>webpack最基本知识</h2><h3 id="什么是webpack"><a href="#什么是webpack" class="headerlink" title="什么是webpack"></a>什么是webpack</h3><hr>
<blockquote>
<p>webpack 的版本  webpack v4.43.0</p>
</blockquote>
<p><a href="https://www.webpackjs.com/guides/installation/" target="_blank" rel="noopener">webpack 中文网</a></p>
<p><a href="https://www.webpackjs.com/" target="_blank" rel="noopener">webpack</a>是<strong>前端的一个项目构建工具</strong>、它是基于Node.js开发出来的一个前端工具</p>
<p>项目名不能与现有包名一致 webpack node vue react</p>
<p>webpack安装 webpack 依赖于 webpack-cli </p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack-cli -g // 全局安装</span><br><span class="line">npm install webpack@3.10.0 -g</span><br><span class="line">npm i webpack -g // 全局安装</span><br><span class="line">//npm i webpack-cli -D ?</span><br><span class="line">cnpm i webpack -D // 安装到开发环境依赖中 --save-dev</span><br></pre></td></tr></table></figure>

<blockquote>
<p>webpack  和 webpack-cli 的区别 webpack-cli 是webpack 的命令行工具</p>
<p>使用Webpack 4.x的命令行需要安装单独的命令行工具</p>
</blockquote>
<p>在项目中根目录中运行命令安装到项目开发依赖中</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack --save-dev // 开发环境依赖</span><br><span class="line">npm i webpack -D</span><br></pre></td></tr></table></figure>

<p>初始化项目(使用npm管理项目中的依赖包)</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm init -y</span><br><span class="line">npm init</span><br></pre></td></tr></table></figure>

<p>安装jQuery</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i jquery -S  //--save 生产依赖</span><br></pre></td></tr></table></figure>

<blockquote>
<p>误区：安装的是jquery 包 而不是 jQuery包 这两个包不是同一个版本</p>
</blockquote>
<p>webpack运行</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">webpack .\src\main.js -o .\dest\bundle.js</span><br><span class="line">webpack 要打包的文件路径 -o 打包好的输出文件的路径</span><br><span class="line">原来webpack的打包cli命令已改为：</span><br><span class="line">webpack &lt;entry&gt; [&lt;entry&gt;] -o &lt;output&gt;</span><br><span class="line">webpack .\src\main.js -o .\dist\bundle.js</span><br></pre></td></tr></table></figure>

<p>webpack的作用</p>
<ol>
<li>webpack能够处理JS文件的相互依赖关系（可以把文件导入到 main.js 中）</li>
<li>webpack能够处理JS的兼容问题，把高级的、浏览器不能识别的语法转为低级的、浏览器能正常识别的语法</li>
</ol>
<p>导入jquery</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">main.js 文件</span><br><span class="line">import $ from <span class="string">'jquery'</span> 小写单引号</span><br></pre></td></tr></table></figure>

<p>ES6导入语法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> ** <span class="keyword">from</span> ** <span class="comment">//是ES6中导入模块的方式</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> * = <span class="built_in">require</span>(<span class="string">'*'</span>)</span><br></pre></td></tr></table></figure>



<h3 id="webapack最基本的配置文件的使用"><a href="#webapack最基本的配置文件的使用" class="headerlink" title="webapack最基本的配置文件的使用"></a>webapack最基本的配置文件的使用</h3><hr>
<h4 id="webpack-config-js"><a href="#webpack-config-js" class="headerlink" title="webpack.config.js"></a><code>webpack.config.js</code></h4><p>Webpack具有四个核心的概念，想要入门Webpack就得先好好了解这四个核心概念。它们分别是<code>Entry（入口）</code>、<code>Output（输出）</code>、<code>loader</code>和<code>Plugins（插件）</code>。接下来详细介绍这四个核心概念。</p>
<p><code>webpack.config.js</code>这个配置文件，起始就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="comment">// 在配置文件中，需要手动指定入口和出口 exports出口</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line"><span class="comment">//	入口，表示，要使用webpack打包那个文件</span></span><br><span class="line">	entry:path.join(_dirname,<span class="string">'./src/main.js'</span>), </span><br><span class="line">	output:&#123; <span class="comment">// 输出文件相关的配置</span></span><br><span class="line">		path:path.join(_dirname,<span class="string">'./dist'</span>),<span class="comment">//指定打包好的文件，输出到哪个目录中去</span></span><br><span class="line">		filename:<span class="string">'bundle.js'</span> <span class="comment">//输出的文件的名称</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="webpack运行命令行"><a href="#webpack运行命令行" class="headerlink" title="webpack运行命令行"></a>webpack运行命令行</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack</span><br></pre></td></tr></table></figure>

<blockquote>
<p>新建webpack.config.js文件<br>控制台输出webpack命令执行的时候，webpack做了以下几步：</p>
<ol>
<li>首先，webpack 发现，我们并没有通过命令的形式，给他指定入口和出口</li>
<li>webpack就会去项目的根目录中，查找一个叫做webpack.config.js的配置文件</li>
<li>当找到配置文件后，webpack会执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象</li>
<li>当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建</li>
</ol>
</blockquote>
<h4 id="package-json"><a href="#package-json" class="headerlink" title="package.json"></a><code>package.json</code></h4><p><strong>在这个文件中找到“scripts”节点加入：</strong></p>
<p> <strong>“dev”: “webpack –mode development”, // 开发环境</strong></p>
<p><strong>“build”: “webpack –mode production” // 生产环境</strong></p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"Webpack"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" $$ exit 1"</span>,</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack --mode development"</span>, <span class="comment">// 开发环境</span></span><br><span class="line">    <span class="attr">"build"</span>: <span class="string">"webpack --mode production"</span> <span class="comment">// 生产环境</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"jquery"</span>: <span class="string">"^3.4.1"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h3 id="webpack之plugin配置和使用"><a href="#webpack之plugin配置和使用" class="headerlink" title="webpack之plugin配置和使用"></a>webpack之plugin配置和使用</h3><hr>
<ul>
<li>webpack-dev-server</li>
<li>html-webpack-plugin</li>
</ul>
<p>plugin 插件；相关插件</p>
<h4 id="webpack-dev-server插件-自动运行项目"><a href="#webpack-dev-server插件-自动运行项目" class="headerlink" title="webpack-dev-server插件 自动运行项目"></a>webpack-dev-server插件 <code>自动运行</code>项目</h4><blockquote>
<p> “webpack”: “^3.10.0”,<br> “webpack-dev-server”: “^2.9.7”</p>
</blockquote>
<p>安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//前提要在webpack安装好全局安装的webpack 和 webpack</span><br><span class="line">npm install webpack-cli -D // webpack4.x以上才要命令行工具 一定要安装</span><br><span class="line">npm install webpack@3.10.0 -D  // 开发依赖</span><br><span class="line">npm install webpack-dev-server@2.9.7 -D</span><br></pre></td></tr></table></figure>

<p>webpack-dev-server工具，来进行<strong>自动打包编译的功能</strong> </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack-dev-server -D</span><br><span class="line">&#x2F;&#x2F;把这个工具安装到项目的本地开发依赖,本地项目安装，不是全局安装</span><br><span class="line"></span><br><span class="line">package.json</span><br><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; $$ exit 1&quot;,</span><br><span class="line">    &quot;dev&quot;: &quot;webpack-dev-server&quot;, &#x2F;&#x2F; &quot;dev&quot;: &quot;webpack --mode development&quot;, &#x2F;&#x2F; 开发环境</span><br><span class="line">    &quot;build&quot;: &quot;webpack --mode production&quot;</span><br><span class="line">&#125;,</span><br><span class="line">npm run dev</span><br><span class="line"></span><br><span class="line">&quot;build&quot;: &quot;webpack --config webpack.dev.config.js&quot;,</span><br></pre></td></tr></table></figure>

<blockquote>
<p>webpack-dev-server这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack</p>
<p>webpack-dev-server打包生成的bundle.js文件，并没有存放到实际的物理磁盘中，而是存放在内存中，项目根目录找不到打包好的bundle.js文件</p>
<p>webpack-dev-server 把我们打包生成的文件，以一种虚拟的形式，托管到了项目的根目录中，虽然看不到它，但是，可以认为和dist src node_modules 目录平级，有一个看不到的文件，是bundle.js</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">"/bundle.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<h6 id="webpack-dev-server的常用命令"><a href="#webpack-dev-server的常用命令" class="headerlink" title="webpack-dev-server的常用命令"></a>webpack-dev-server的常用命令</h6><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"dev"</span>:<span class="string">"webpack-dev-server --open --port 3000 --contentBase src --hot"</span></span><br><span class="line">webpack-dev-server --open --port 3000 --contentBase src </span><br><span class="line">--hot 减少不必要的更新</span><br></pre></td></tr></table></figure>

<p>index的路径要更改为</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;.&#x2F;bundle&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>



<h6 id="webpack-dev-server的配置命令的"><a href="#webpack-dev-server的配置命令的" class="headerlink" title="webpack-dev-server的配置命令的"></a>webpack-dev-server的配置命令的</h6><p>webpack.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">dev:<span class="string">'webpack-dev-server'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">'webpack'</span>)</span><br><span class="line"></span><br><span class="line">--open --port <span class="number">3000</span> --contentBase src --hot</span><br><span class="line">devServer:&#123; <span class="comment">// 配置dev-server命令参数的第二次形式，相对来说，这种方式麻烦一些</span></span><br><span class="line">    open:<span class="literal">true</span>, <span class="comment">//自动打开浏览器</span></span><br><span class="line">    port:<span class="number">3000</span>,<span class="comment">// 设置启动时候的运行端口</span></span><br><span class="line">    contentBase: <span class="string">'src'</span><span class="comment">//指定托管的根目录 src 要带 ‘’ 号</span></span><br><span class="line">    hot:<span class="literal">true</span> <span class="comment">// 启用热更新 </span></span><br><span class="line">&#125;</span><br><span class="line">plugins:[ <span class="comment">//数组</span></span><br><span class="line">    <span class="keyword">new</span> webpack.HotModuleReplacementPlugin();</span><br><span class="line">    <span class="comment">//new 一个热更新的模块对象 这是启动更新</span></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>

<h4 id="webpack-dev-server报错1"><a href="#webpack-dev-server报错1" class="headerlink" title="webpack-dev-server报错1"></a>webpack-dev-server报错1</h4><p><a href="https://www.cnblogs.com/Smiled/p/9790649.html" target="_blank" rel="noopener">https://www.cnblogs.com/Smiled/p/9790649.html</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm WARN webpack-dev-server@3.10.3 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.</span><br><span class="line">npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.</span><br><span class="line">npm WARN Webpack@1.0.0 No description</span><br><span class="line">npm WARN Webpack@1.0.0 No repository field.</span><br><span class="line">npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents):  </span><br><span class="line">npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted &#123;&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;&#125; (current: &#123;&quot;os&quot;:&quot;win32&quot;,&quot;arch&quot;:&quot;x64&quot;&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">删除     </span><br><span class="line">在全局下删除    </span><br><span class="line">npm  uninstall  webpack  -g</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">npm ERR! code ELIFECYCLE</span><br><span class="line">npm ERR! errno 1</span><br><span class="line">npm ERR! webmo@1.0.0 dev: &#96;webpack-dev-server --open --port 3000 --contentBase src --hot&#96; </span><br><span class="line">npm ERR! Exit status 1</span><br><span class="line">npm ERR!</span><br><span class="line">npm ERR! Failed at the webmo@1.0.0 dev script.</span><br><span class="line">npm ERR! This is probably not a problem with npm. There is likely additional logging output above.</span><br><span class="line"></span><br><span class="line">npm ERR! A complete log of this run can be found in:</span><br><span class="line">npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-05-22T07_10_16_880Z-debug.log</span><br></pre></td></tr></table></figure>



<p>在Vue安装webpack时，遇见了上面的提示，可以安装一个较低的版本：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack@3.0.0 -g</span><br></pre></td></tr></table></figure>

<h4 id="webpack-dev-server报错2"><a href="#webpack-dev-server报错2" class="headerlink" title="webpack-dev-server报错2"></a>webpack-dev-server报错2</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">npm ERR! code ELIFECYCLE</span><br><span class="line">npm ERR! errno 1</span><br><span class="line">npm ERR! Webpack@1.0.0 dev: &#96;webpack-dev-server&#96;</span><br><span class="line">npm ERR! Exit status 1</span><br><span class="line">npm ERR!</span><br><span class="line">npm ERR! Failed at the Webpack@1.0.0 dev script.</span><br><span class="line">npm ERR! This is probably not a problem with npm. There is likely additional logging output above.</span><br><span class="line">npm ERR! A complete log of this run can be found in:</span><br><span class="line">npm ERR!     D:\Program Files\NodeJs\dev\Node\Cache\_logs\2020-03-30T15_39_10_723Z-debug.log</span><br></pre></td></tr></table></figure>

<p>webpack-dev-server的版本太高的锅，3.以上的还是不行。所以降到2.11.3一下左右即可</p>
<p>package.json</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"webpack"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"build"</span>: <span class="string">"webpack --mode production"</span>,</span><br><span class="line">    <span class="attr">"dev"</span>: <span class="string">"webpack-dev-server"</span>,</span><br><span class="line">    <span class="attr">"start"</span>: <span class="string">"webpack-dev-server --config webpack.dev.config.js --color --progress"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line">  <span class="attr">"devDependencies"</span>: &#123;</span><br><span class="line">    <span class="attr">"webpack"</span>: <span class="string">"^3.10.0"</span>,</span><br><span class="line">    <span class="attr">"webpack-dev-server"</span>: <span class="string">"^2.9.7"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>删除包 node_modules 和 package-lock.json</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i // 重新安装</span><br></pre></td></tr></table></figure>





<h4 id="html-webpack-plugin插件-在内存中生成主页-自动追加页面到主页"><a href="#html-webpack-plugin插件-在内存中生成主页-自动追加页面到主页" class="headerlink" title="html-webpack-plugin插件 在内存中生成主页/ 自动追加页面到主页"></a>html-webpack-plugin插件 在内存中生成主页/ 自动追加页面到主页</h4><blockquote>
<p>将index.html页面也放到内存中去</p>
<p>将物理磁盘中的index.html 页面放到内存中去</p>
<p>导入在内存中生成html页面的插件</p>
</blockquote>
<h6 id="html-webpack-plugin插件的两个基本操作"><a href="#html-webpack-plugin插件的两个基本操作" class="headerlink" title="html-webpack-plugin插件的两个基本操作"></a>html-webpack-plugin插件的两个基本操作</h6><p>导入在内存中生成 HTML页面的插件</p>
<ol>
<li>自动在内存中根据指定页面生成一个内存的页面</li>
<li>自动，把打包好的bundle.js追加到页面中去,不用自动引入</li>
</ol>
<p>安装插件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i html-webpack-plugin -D</span><br></pre></td></tr></table></figure>

<p>webpack.config.js 文件的配置</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 只要是插件，都要放到plugins 节点中去</span></span><br><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">'webpack'</span>)</span><br><span class="line"><span class="keyword">const</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>)</span><br><span class="line"><span class="comment">// 导入在内存中生成html页面的插件</span></span><br><span class="line">devServer:&#123;</span><br><span class="line">    </span><br><span class="line">&#125;,</span><br><span class="line"> webpack.Hot</span><br><span class="line"> htmlWebpackPlugin</span><br><span class="line">plugins:[</span><br><span class="line">     <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(),</span><br><span class="line"><span class="comment">//创建一个在内存中，生成HTML页面的插件</span></span><br><span class="line">   <span class="keyword">new</span> htmlWebpackPlugin(&#123;</span><br><span class="line">   	template:path.join(_dirname,<span class="string">'./src/index.html'</span>),</span><br><span class="line">   	<span class="comment">//指定模板页面，会根据指定的页面路径，去生成内存中的页面</span></span><br><span class="line">   	filename:<span class="string">'index123.html'</span> <span class="comment">//指定生成的页面的名称 </span></span><br><span class="line">   &#125;)</span><br><span class="line">]</span><br><span class="line"><span class="comment">//当使用html-wabpack-plugin之后，不在需要手动处理bundle.js的引用路径，这个插件，已经帮我们创建了一个合适的script，并且，引用了正确的路径</span></span><br></pre></td></tr></table></figure>

<p><a href="https://blog.csdn.net/qq_31847185/article/details/81066537" target="_blank" rel="noopener">webpack-dev-server 出现错误 webpack-dev-server Cannot GET /</a></p>
<p>index 文件是在src源文件中的</p>
<p>方案一、直接将index.html文件放入dist中</p>
<blockquote>
<p>我看的webpack3.x视频中，老师直接将index.html文件放入dist中，同样能够生成首页。</p>
</blockquote>
<p>方案二，使用HtmlWebpackPlugin插件生成首页</p>
<blockquote>
<p>因为出错，所以百度的时候找到了第二种解决方案，即用HtmlWebpackPlugin插件生成首页，去官网瞅了一眼，貌似官网也是用的这个插件，所以就了解了一下。</p>
</blockquote>
<h3 id="loader加载器"><a href="#loader加载器" class="headerlink" title="loader加载器"></a>loader加载器</h3><p>CSS、less、scss</p>
<ul>
<li>npm i style-loader css-loader -D   <code>css</code></li>
<li>npm i less-loader less -D<code>less</code></li>
<li>npm i sass-loader node-sass -D<code>scss</code></li>
</ul>
<p>image，字体</p>
<ul>
<li>npm i url-loader file-loader -D</li>
</ul>
<h3 id="loader配置和使用-引入-JS（webpack-默认部分）、CSS-less-scss-、图片-、字体"><a href="#loader配置和使用-引入-JS（webpack-默认部分）、CSS-less-scss-、图片-、字体" class="headerlink" title="loader配置和使用  引入 JS（webpack 默认部分）、CSS(less,scss) 、图片  、字体"></a>loader配置和使用  引入 JS（webpack 默认部分）、CSS(less,scss) 、图片  、字体</h3><hr>
<p>修改文件webpack.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">npm i style-loader css-loader less-loader node-sass sass-loader -D <span class="comment">// 开发依赖</span></span><br><span class="line">cnpm i url-loader file-loader -D</span><br><span class="line"><span class="built_in">module</span>:&#123;</span><br><span class="line">	rules:[</span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.css&amp;/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>]&#125;,</span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.less&amp;/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>]&#125;,</span><br><span class="line">        &#123;<span class="attr">test</span>:<span class="regexp">/\.scss$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'sass-loader'</span>]&#125;,</span><br><span class="line">        &#123;<span class="attr">test</span>:<span class="regexp">/\.(ttf|eot|svg|woff|woff2)$/</span>,<span class="attr">use</span>:<span class="string">'url-loader'</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">test</span>:<span class="regexp">/\.(jpg|png|gif|bmp|jpeg)$/</span>,<span class="attr">use</span>:<span class="string">'url-loader?limit=7631$name=[name].[ext]'</span>&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="一、CSS-less、scss"><a href="#一、CSS-less、scss" class="headerlink" title="一、CSS(less、scss)"></a>一、CSS(less、scss)</h4><hr>
<h4 id="css-、less、scss、字体"><a href="#css-、less、scss、字体" class="headerlink" title="css 、less、scss、字体"></a>css 、less、scss、字体</h4><p>导入main.js 入口文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import &#39;.&#x2F;css&#x2F;index.css&#39;</span><br></pre></td></tr></table></figure>



<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'./css/index.css'</span></span><br><span class="line"></span><br><span class="line">npm i style-loader css-loader -D</span><br><span class="line"><span class="comment">//模块的匹配规则</span></span><br><span class="line"><span class="built_in">module</span>:&#123; <span class="comment">//配置所有第三方loader模块的</span></span><br><span class="line">	rules;[ <span class="comment">//处理CSS文件的loader</span></span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.css$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>]&#125;</span><br><span class="line">	]	</span><br><span class="line">&#125;</span><br><span class="line">npm i less-loader less -D</span><br><span class="line"><span class="comment">//处理less文件的loader</span></span><br><span class="line">	&#123;<span class="attr">test</span>:<span class="regexp">/\.less$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>]&#125;</span><br><span class="line">	</span><br><span class="line">npm i sass-loader node-sass -D</span><br><span class="line"><span class="comment">//处理sass文件的loader</span></span><br><span class="line">	&#123;<span class="attr">test</span>:<span class="regexp">/\.less$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>,<span class="string">'sass-loader'</span>]&#125;</span><br></pre></td></tr></table></figure>

<h4 id="loader配置处理css样式表的第三方loader"><a href="#loader配置处理css样式表的第三方loader" class="headerlink" title="loader配置处理css样式表的第三方loader"></a>loader配置处理css样式表的第三方loader</h4><p>使用import语法，导入CSS样式表</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">'./css/index.css</span></span><br></pre></td></tr></table></figure>

<p><code>注意：webpack、默认只能打包处理JS类型的文件，无法处理其他的非JS类型的文件</code></p>
<p>如果要处理非JS类型的文件，我们需要手动安装一些第三方loader加载器</p>
<ol>
<li>如果想要打包处理css文件</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i style-loader css-loader -D</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>webpack.config.js配置文件</li>
</ol>
<p>新增module配置节点，有一个rules属性，这个rules属性是个数组，这个数组存放，第三方文件的匹配和处理规则</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>:&#123; <span class="comment">//这个节点.配置第三方模块加载器</span></span><br><span class="line">	rules:[ <span class="comment">//所有第三方模块的匹配规则</span></span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.css$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>]&#125;</span><br><span class="line">		<span class="comment">//配置处理 .css文件的第三方loader规则</span></span><br><span class="line">		<span class="comment">// 调用规则从右到左  </span></span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>webpack 处理第三方文件类型得过程</p>
<ol>
<li>不是JS文件，然后去配置配置文件中查找有没有第三方的loader规则</li>
<li>如果找到对应的规则，就会把处理的结果，直接交给webpack会调用loader处理，这种文件类型</li>
<li>在调用loader的时候，是从后往前调用的</li>
<li>最后一个loader调用完毕，会把处理结果，直接交给webpack进行打包合并，最终输出到bundle.js中去</li>
</ol>
</blockquote>
<p>报错</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ERROR in .&#x2F;src&#x2F;main.js</span><br><span class="line">Module not found: Error: Can&#39;t resolve &#39;.&#x2F;css&#x2F;index&#39; in &#39;d:\GitRepository\VsWorkSpace\WebFrame\Webpack\src&#39;</span><br><span class="line"> @ .&#x2F;src&#x2F;main.js 2:0-21</span><br><span class="line"> @ multi .&#x2F;node_modules&#x2F;_webpack-dev-server@2.11.5@webpack-dev-server&#x2F;client?http:&#x2F;&#x2F;127.0.0.1:8081 .&#x2F;src&#x2F;main.js</span><br></pre></td></tr></table></figure>

<h4 id="loader配置处理less文件的loader"><a href="#loader配置处理less文件的loader" class="headerlink" title="loader配置处理less文件的loader"></a>loader配置处理less文件的loader</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">cnpm i less -D </span><br><span class="line">cnpm i less-loader _D</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>:&#123; <span class="comment">//这个节点.配置第三方模块加载器</span></span><br><span class="line">	rules:[ <span class="comment">//所有第三方模块的匹配规则</span></span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.css$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>]&#125;</span><br><span class="line">		<span class="comment">//配置处理 .css文件的第三方loader规则</span></span><br><span class="line">		<span class="comment">// 调用规则从右到左</span></span><br><span class="line">        <span class="comment">//配置处理less文件的第三方loader规则 </span></span><br><span class="line">       	&#123;<span class="attr">test</span>:<span class="regexp">/\.less$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>]&#125;</span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="loader配置处理scss文件的loader"><a href="#loader配置处理scss文件的loader" class="headerlink" title="loader配置处理scss文件的loader"></a>loader配置处理scss文件的loader</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">cnpm i node-sass -D</span><br><span class="line">cnpm i sass-loader -D</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>:&#123; <span class="comment">//这个节点.配置第三方模块加载器</span></span><br><span class="line">	rules:[ <span class="comment">//所有第三方模块的匹配规则</span></span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.css$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>]&#125;</span><br><span class="line">		<span class="comment">//配置处理 .css文件的第三方loader规则</span></span><br><span class="line">		<span class="comment">// 调用规则从右到左</span></span><br><span class="line">        <span class="comment">//配置处理less文件的第三方loader规则 </span></span><br><span class="line">       	&#123;<span class="attr">test</span>:<span class="regexp">/\.less$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>]&#125;</span><br><span class="line">       	 <span class="comment">//配置处理less文件的第三方loader规则 </span></span><br><span class="line">       	&#123;<span class="attr">test</span>:<span class="regexp">/\.sass$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'sass-loader'</span>]&#125;</span><br><span class="line">       	 <span class="comment">//配置处理sass文件的第三方loader规则 </span></span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="二、字体"><a href="#二、字体" class="headerlink" title="二、字体"></a>二、字体</h4><hr>
<h4 id="webpack中使用url-loader处理字体"><a href="#webpack中使用url-loader处理字体" class="headerlink" title="webpack中使用url-loader处理字体"></a>webpack中使用url-loader处理字体</h4><p> Bootstrap安装</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">index.html</span><br><span class="line">  &lt;link rel=<span class="string">"stylesheet"</span> src=<span class="string">"/node_modules/bootstrap/dist/css/bootstrap.css"</span>&gt;</span><br><span class="line"></span><br><span class="line">main.js</span><br><span class="line">npm i boostrap@<span class="number">3</span> -S  <span class="comment">// 要安装bootstrap 3</span></span><br><span class="line">cnpm i url-loader -D</span><br><span class="line">&#123;<span class="attr">test</span>:<span class="regexp">/\.(ttf|eot|svg|woff|woff2)$/</span>,<span class="attr">use</span>:<span class="string">'url-loader'</span>&#125; <span class="comment">//处理字体文件的loader</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">  </span><br><span class="line"><span class="comment">//如果要通过路径的形式，去引入node_modules中相关的文件，可以直接省略 路径前面的node_modules 这一层目录，直接写包的名称，然后后面跟上具体的文 件路径</span></span><br><span class="line"><span class="comment">// 不写node_modules这一层目录，默认 就会去node_modules中查找</span></span><br><span class="line"><span class="built_in">module</span>:&#123; <span class="comment">//这个节点.配置第三方模块加载器</span></span><br><span class="line">	rules:[ <span class="comment">//所有第三方模块的匹配规则</span></span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.css$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>]&#125;</span><br><span class="line">		<span class="comment">//配置处理 .css文件的第三方loader规则</span></span><br><span class="line">		<span class="comment">// 调用规则从右到左</span></span><br><span class="line">        <span class="comment">//配置处理less文件的第三方loader规则 </span></span><br><span class="line">       	&#123;<span class="attr">test</span>:<span class="regexp">/\.less$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'less-loader'</span>]&#125;</span><br><span class="line">       	 <span class="comment">//配置处理scss文件的第三方loader规则 </span></span><br><span class="line">       	&#123;<span class="attr">test</span>:<span class="regexp">/\.scss$/</span>,<span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">'css-loader'</span>,<span class="string">'sass-loader'</span>]&#125;</span><br><span class="line">       	 <span class="comment">//配置处理lass文件的第三方loader规则 </span></span><br><span class="line">		&#123;<span class="attr">test</span>:<span class="regexp">/\.(ttf|eot|svg|woff|woff2)$/</span>,<span class="attr">use</span>:<span class="string">'url-loader'</span>&#125;,</span><br><span class="line">		<span class="comment">//处理字体文件的loader</span></span><br><span class="line">	]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>犯错误</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bootstrap 有两个版本 3、4 </span><br><span class="line">引入css要安装 css-loader 和 style-loader 这两个依赖 </span><br><span class="line">如果不指定安装那么，bootstrap 默认的版本就是bootstrap4</span><br><span class="line">npm i 包 -g &#x2F;&#x2F; 默认的版本是最新的</span><br></pre></td></tr></table></figure>



<h4 id="三、图片"><a href="#三、图片" class="headerlink" title="三、图片"></a>三、图片</h4><hr>
<p>默认情况下，webpack无法处理CSS文件中的url地址，不管是图片还是字体库，只要是URL地址，都处理不了</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">cnpm i url-loader file-loader -D</span><br><span class="line"></span><br><span class="line">&#123;<span class="attr">test</span>:<span class="regexp">/\.(jpg|png|gif|bmp|jpeg)$/</span>,<span class="attr">use</span>:<span class="string">'url-loader?limit=7631&amp;name=[name].[ext]'</span>&#125;</span><br><span class="line">&#123;<span class="attr">test</span>:<span class="regexp">/\.(jpg|png|gif|bmp|jpeg)$/</span>,<span class="attr">use</span>:<span class="string">'url-loader?limit=7631&amp;name=[hash:8]-[name].[ext]'</span>&#125; </span><br><span class="line"><span class="comment">//添加hash值 解决不同目录的不同图片名字相同 出现冲突的问题</span></span><br><span class="line"><span class="comment">// ?传参 7631图片大小的字</span></span><br><span class="line"><span class="comment">//name=[hash:8]-[name].[ext] 添加8位hash值解决重命名</span></span><br><span class="line"><span class="comment">// name=[name].[ext] 保留原本的名称 .[ext] 保留文件的后缀名</span></span><br><span class="line"><span class="comment">// limit 给定的值，是图片的大小，单位是byte ,如果我们引用的图片大于，或等于更定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64的字符串</span></span><br><span class="line"><span class="comment">//图片的名称是哈希值</span></span><br><span class="line"><span class="comment">//处理图片路径的loader</span></span><br></pre></td></tr></table></figure>



<h4 id="四、JS文件（ES6-ES7及以上的高级语法）、-webpack中的babel的配置"><a href="#四、JS文件（ES6-ES7及以上的高级语法）、-webpack中的babel的配置" class="headerlink" title="四、JS文件（ES6\ES7及以上的高级语法）、 webpack中的babel的配置"></a>四、JS文件（ES6\ES7及以上的高级语法）、 webpack中的babel的配置</h4><hr>
<p><code>Babel,可以帮助我们将高级的语法转为低级的语法</code></p>
<p>在webpack中，可以运行如下两套命令，安装两套包，去安装Babel相关的loader功能</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">//第一套包 babel转换工具</span><br><span class="line">npm i babel-core babel-loader babel-plugin-transform-runtime -D</span><br><span class="line">babel-core/loader plugin-transform-runtime </span><br><span class="line">//第二套包 语法插件</span><br><span class="line">npm i babel-preset-env babel-preset-stage-0 -D</span><br><span class="line">babel-preset- env/stage-0</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">webpack配置文件，在<span class="built_in">module</span>节点下的rules数组中，添加一个新的匹配规则：</span><br><span class="line">&#123; <span class="attr">test</span>:<span class="regexp">/\.js$/</span>,<span class="attr">use</span>:<span class="string">'babel-loader'</span>,<span class="attr">exclude</span>:<span class="regexp">/node_modules/</span> &#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">//exclude</span></span><br><span class="line">exclude:<span class="regexp">/node_modules/</span> </span><br><span class="line">注意：在配置balbe的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉</span><br><span class="line">不排除node_modules,则Babel会把node_modules中所有的第三方JS文件，都打包编译，这样，会非常消耗CPU,同时，打包速度非常慢；</span><br><span class="line">Babel把所有node_modeues中的JS装换完毕了，项目也无法运行</span><br><span class="line"></span><br><span class="line">项目根目录中，新建一个.babelrc 的Babel配置文件，这个配置文件，属于<span class="built_in">JSON</span>格式，在写.babelrc配置的时候 ,必须符合<span class="built_in">JSON</span>语法规范；不能注释，字符串必须用双引号</span><br><span class="line"></span><br><span class="line"><span class="comment">// presets  语法</span></span><br><span class="line">.babelrc文件</span><br><span class="line">&#123;</span><br><span class="line">	<span class="string">"presets"</span>:[<span class="string">"env"</span>,<span class="string">"stage-0"</span>], <span class="comment">//语法</span></span><br><span class="line">	<span class="string">"plugins"</span>:[<span class="string">"transform-runtime"</span>] <span class="comment">//插件</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span>关键字，是<span class="title">ES6</span>中提供的新语法，是用来实现<span class="title">ES6</span>中面向对象编程的方式</span></span><br><span class="line"><span class="class"><span class="title">class</span> <span class="title">Person</span></span>&#123;</span><br><span class="line"><span class="comment">//使用static关键字，可以定义静态属性</span></span><br><span class="line"><span class="comment">// 静态属性，就是直接通过类名，直接访问的属性</span></span><br><span class="line"><span class="comment">//实例属性：只能通过类的实例，来访问的属性，叫做实例属性</span></span><br><span class="line">	<span class="keyword">static</span> info = &#123;<span class="attr">name</span>:<span class="string">'zs'</span>,<span class="attr">age</span>:<span class="number">20</span>&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//Java C# 实现面向对象的方式完全一样了，class是从后端语言中借鉴过来的。来实现面向对象</span></span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> Person()</span><br><span class="line">conslole.log(Person.info&#125;)</span><br><span class="line">在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者ES7语法，webpack是处理不了的;这时候就需要借助于第三方的loader,来帮助webpack 处理这些高级的语法，当第三方loader把高级语法转为低级语法之后，会把结果交给webpack去打包到bundle.js中</span><br><span class="line"><span class="comment">//通过babel,可以帮助我们将高级的语法转为低级的语法</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params">name</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.name = name</span><br><span class="line">&#125;</span><br><span class="line">Animal.info = <span class="number">123</span></span><br><span class="line"><span class="keyword">var</span> al = <span class="keyword">new</span> Aninal(<span class="string">'小花'</span>)</span><br><span class="line"><span class="comment">//静态属性</span></span><br><span class="line"><span class="built_in">console</span>.log(Animal.info);</span><br><span class="line"><span class="comment">//实例属性</span></span><br><span class="line"><span class="built_in">console</span>.log(al.name)</span><br></pre></td></tr></table></figure>





<h3 id="webpack-Vue结合"><a href="#webpack-Vue结合" class="headerlink" title="webpack + Vue结合"></a>webpack + Vue结合</h3><hr>
<h4 id="在普通页面中使用render函数渲染组件"><a href="#在普通页面中使用render函数渲染组件" class="headerlink" title="在普通页面中使用render函数渲染组件"></a>在普通页面中使用render函数渲染组件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>this is a p<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">        template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>this is a h1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el: <span class="string">'#app'</span>,</span></span><br><span class="line">        data: &#123;&#125;,</span><br><span class="line">        methods: &#123;&#125;,</span><br><span class="line"><span class="actionscript">        <span class="comment">//注意：这里</span></span></span><br><span class="line">        render(createElements) &#123;</span><br><span class="line"><span class="actionscript">            <span class="keyword">return</span> createElements(login)</span></span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        render:<span class="function"><span class="keyword">function</span><span class="params">(createElements)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">           <span class="keyword">return</span> createElements(login)</span></span><br><span class="line">        &#125;,</span><br><span class="line"><span class="actionscript">        <span class="comment">//compontents:&#123;</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//  login</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//&#125;</span></span></span><br><span class="line">    &#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>render 与 compontents 的区别</p>
<p>render：return 的结果，会替换页面中el指定的那个容器的内容，compontents 则不会清空</p>
</blockquote>
<h4 id="render的几种写法"><a href="#render的几种写法" class="headerlink" title="render的几种写法"></a>render的几种写法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">render(createElements) &#123;</span><br><span class="line">	<span class="keyword">return</span> createElements(login)</span><br><span class="line">&#125;,</span><br><span class="line">render:<span class="function"><span class="keyword">function</span>(<span class="params">createElements</span>) </span>&#123;</span><br><span class="line">	<span class="keyword">return</span> createElements(login)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 简写方法    </span></span><br><span class="line">render: <span class="function"><span class="params">c</span> =&gt;</span> c(login)</span><br></pre></td></tr></table></figure>



<h4 id="如何在webpack中构建项目中，使用Vue进行开发"><a href="#如何在webpack中构建项目中，使用Vue进行开发" class="headerlink" title="如何在webpack中构建项目中，使用Vue进行开发"></a>如何在webpack中构建项目中，使用Vue进行开发</h4><h5 id="在普通网页中如何使用vue"><a href="#在普通网页中如何使用vue" class="headerlink" title="在普通网页中如何使用vue"></a>在普通网页中如何使用vue</h5><blockquote>
<ol>
<li>使用script标签，引入vue的包</li>
<li>在index页面中，创建一个id为appdiv容器</li>
<li>通过newVue得到一个vm的实例</li>
</ol>
</blockquote>
<h5 id="在webpack中如何使用vue"><a href="#在webpack中如何使用vue" class="headerlink" title="在webpack中如何使用vue"></a>在webpack中如何使用vue</h5><blockquote>
<p>注意：在webpack 中，使用import Vue from’vue’导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式，<br>回顾包的查找规则:</p>
<ol>
<li>找项目根目录中有没有node modules 的文件夹</li>
<li>在node modules中根据包名，找对应的vue 文件夹</li>
<li>在vue文件夹中，找一个叫做package.json的包配文件</li>
<li>在package.json 文件中，查找一个main 属性[main属性指定了这个包在被加载时候的入口文件]</li>
</ol>
</blockquote>
<p>方法一 、直接在引入vue中vue,js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">main.js 入口文件</span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'../node_modules/vue/dist/vue.js'</span></span><br></pre></td></tr></table></figure>

<p>方法二  在webpack.config.js中添加resolve属性：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//vue会默认导入vue.runtime.common.js文件</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line">resolve:&#123;</span><br><span class="line">    alias:&#123; <span class="comment">//修改Vue被导入时候的包的路径</span></span><br><span class="line">        <span class="string">"vue$"</span>:<span class="string">"vue/dist/vue.js"</span> </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>方法三、修改 node_modules中 vue 的 package.json下的 包配置文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//ctrl+f 查找main的属性</span></span><br><span class="line">dist/vue.runtime.common.js =&gt; dist/vue.js</span><br></pre></td></tr></table></figure>

<p>方法四、直接使用vue.runtime.common.js文件（ runtime-only的方式） 需要安装第三方loader</p>
<p>这种方法能直接解析``vue后缀的文件`进行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm i vue -S</span><br><span class="line">npm i vue-loader vue-template-compiler -D</span><br><span class="line">npm i style-loader css-loader -D</span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line">单独的把组件的内容新建成.vue文件</span><br></pre></td></tr></table></figure>

<p>main.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// var login = &#123;</span></span><br><span class="line"><span class="comment">//   template: '&lt;h1&gt;这是login组件，是使用网页中形式创建出来的组件&lt;/h1&gt;'</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"><span class="comment">// 1. 导入 login 组件</span></span><br><span class="line"><span class="keyword">import</span> login <span class="keyword">from</span> <span class="string">'./login.vue'</span></span><br><span class="line"><span class="comment">// 默认，webpack 无法打包 .vue 文件，需要安装 相关的loader： </span></span><br><span class="line"><span class="comment">//  cnpm i vue-loader vue-template-compiler -D</span></span><br><span class="line"><span class="comment">//  在配置文件中，新增loader哦配置项 &#123; test:/\.vue$/, use: 'vue-loader' &#125;</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    msg: <span class="string">'123'</span>  </span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// components: &#123;</span></span><br><span class="line">  <span class="comment">//   login</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">/* render: function (createElements) &#123; // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现</span></span><br><span class="line"><span class="comment">    return createElements(login)</span></span><br><span class="line"><span class="comment">  &#125; */</span></span><br><span class="line">  render: <span class="function"><span class="params">c</span> =&gt;</span> c(login)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">import</span> m222, &#123; title <span class="keyword">as</span> title123, content &#125; <span class="keyword">from</span> <span class="string">'./test.js'</span></span><br><span class="line"><span class="built_in">console</span>.log(m222)</span><br><span class="line"><span class="built_in">console</span>.log(title123 + <span class="string">' --- '</span> + content)</span><br></pre></td></tr></table></figure>



<h5 id="在webpack中配置-vue-组件页面的解析"><a href="#在webpack中配置-vue-组件页面的解析" class="headerlink" title="在webpack中配置.vue 组件页面的解析"></a>在webpack中配置.vue 组件页面的解析</h5><p>webpack无法打包.vue 文件需要安装 vue相关的1oader</p>
<ol>
<li><p>运行<code>cnpm i vue -S</code>将vue安装为运行依赖；</p>
</li>
<li><p>运行<code>cnpm i vue-loader vue-template-compiler -D</code>将解析转换vue的包安装为开发依赖；</p>
</li>
<li><p>运行<code>cnpm i style-loader css-loader -D</code>将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；</p>
</li>
<li><p>在<code>webpack.config.js</code>中，添加如下<code>module</code>规则：</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">     &#123; <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] &#125;,</span><br><span class="line">     &#123; <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>, <span class="attr">use</span>: <span class="string">'vue-loader'</span> &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>创建<code>App.js</code>组件页面：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="6">
<li>创建<code>main.js</code>入口文件：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 Vue 组件</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="comment">// 导入 App组件</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./components/App.vue'</span></span><br><span class="line"><span class="comment">// 创建一个 Vue 实例，使用 render 函数，渲染指定的组件</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    render: <span class="function"><span class="params">c</span> =&gt;</span> c(App)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h5 id="vue组件由三个部分构成-template-script-style"><a href="#vue组件由三个部分构成-template-script-style" class="headerlink" title="vue组件由三个部分构成 template script style"></a>vue组件由三个部分构成 <code>template script style</code></h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">login.vue </span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;这是登录组件，使用 .vue 文件定义出来的 --- &#123;&#123;msg&#125;&#125;&lt;&#x2F;h1&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;  </span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    &#x2F;&#x2F; 注意：组件中的 data 必须是 function</span><br><span class="line">    return &#123;</span><br><span class="line">      msg: &quot;123&quot;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    show() &#123;</span><br><span class="line">      console.log(&quot;调用了 login.vue 中的 show 方法&quot;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br><span class="line"> </span><br><span class="line">main.js</span><br><span class="line">import login from &#39;.&#x2F;login.vue&#39;</span><br></pre></td></tr></table></figure>

<h4 id="export-default-和-export的使用方式"><a href="#export-default-和-export的使用方式" class="headerlink" title="export default 和 export的使用方式"></a>export default 和 export的使用方式</h4><blockquote>
<p>这是Node 中向外暴露成员的形式：<br>module.exports =()<br>在ES6中，也通过规范的形式，规定了ES6中如何导入和导出模块</p>
<p>ES6中导入模块，使用import 模块名称from植块示识符    ’import”表示路径’<br>在ES6中，使用export default和export 向外暴露成员：</p>
<p>在Node中使用<br>var名称= require（‘模块标识符’）<br>module.exports 和 exports 来暴露成员</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">test.js </span><br><span class="line"><span class="comment">//第一种</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">	name:<span class="string">'zs'</span>,</span><br><span class="line">	age:<span class="number">20</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//第二种</span></span><br><span class="line"><span class="keyword">var</span> info = &#123;</span><br><span class="line">    name:<span class="string">'zs'</span>,</span><br><span class="line">    age：<span class="number">20</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> info</span><br><span class="line"><span class="comment">// export default 向外暴露的成员可以使用任意的变量来接收</span></span><br><span class="line"><span class="comment">// 在一个模块中，export default 只允许向外暴露1次</span></span><br><span class="line"><span class="comment">//在一个模块中，可以同时使用export defaplt和export 向外暴露成员  </span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> title = <span class="string">'小星星'</span></span><br><span class="line"><span class="comment">// 使用export 向外暴露的成员，只能使用&#123;&#125;的形式来接收，这种形式，叫做[按需导出]</span></span><br><span class="line">注意，<span class="keyword">export</span> 可以向外暴露多个成员，同时，如果某些成员，我们在<span class="keyword">import</span> 的时候，不需要，则可不在&#123;&#125;中定义</span><br><span class="line">注意：使用<span class="keyword">export</span> 导出的成员，必须严格按照导出时候的名称，来使用（&#125;按需接收：注意：使用<span class="keyword">export</span> 导出的成员，如果就想换个名称来接收，可以使用<span class="keyword">as</span>来起别名；</span><br><span class="line"> </span><br><span class="line">main.js 导入</span><br><span class="line"><span class="keyword">import</span> m,&#123; title <span class="keyword">as</span> title123 &#125; <span class="keyword">from</span> <span class="string">'./test.js'</span></span><br><span class="line"><span class="built_in">console</span>.log(m)</span><br><span class="line"><span class="built_in">console</span>.log(title)</span><br></pre></td></tr></table></figure>



<h4 id="总结梳理：webpack中如何使用yue："><a href="#总结梳理：webpack中如何使用yue：" class="headerlink" title="总结梳理：webpack中如何使用yue："></a>总结梳理：webpack中如何使用yue：</h4><blockquote>
<p>1.安装vue的包：cnpm i vue -S<br>2.由于在webpack中，推荐使用.vue 这个组件模板文件定义组件，所以，需要安装能解析这种文件的loader </p>
<p>cnpm i vue-1oader vue-template-complier -D<br>3.在main.js 中，导入vue模块<br><code>import Vue from &#39;vue&#39;</code><br>4.定义一个.vue 结尾的组件，其中，组件有二部分组成：template script style<br>5.使用<code>import login from &#39;../login.vue&#39;</code>导入这个组件<br>6、创建Vm的实例var Vm = new Vue（{el：’#app’，render：C =&gt; c（ogin）}）<br>7.在页面中创建一个id为app 的div元素，作为我们vm实例要控制的区域；</p>
</blockquote>
<p>webpack.config.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的</span></span><br><span class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="comment">// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部</span></span><br><span class="line"><span class="comment">// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点</span></span><br><span class="line"><span class="keyword">var</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>)</span><br><span class="line"><span class="comment">// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  entry: path.join(__dirname, <span class="string">'./src/main.js'</span>), <span class="comment">// 入口文件</span></span><br><span class="line">  output: &#123; <span class="comment">// 指定输出选项</span></span><br><span class="line">    path: path.join(__dirname, <span class="string">'./dist'</span>), <span class="comment">// 输出路径</span></span><br><span class="line">    filename: <span class="string">'bundle.js'</span> <span class="comment">// 指定输出文件的名称</span></span><br><span class="line">  &#125;,</span><br><span class="line">  plugins: [ <span class="comment">// 所有webpack  插件的配置节点</span></span><br><span class="line">    <span class="keyword">new</span> htmlWebpackPlugin(&#123;</span><br><span class="line">      template: path.join(__dirname, <span class="string">'./src/index.html'</span>), <span class="comment">// 指定模板文件路径</span></span><br><span class="line">      filename: <span class="string">'index.html'</span> <span class="comment">// 设置生成的内存页面的名称</span></span><br><span class="line">    &#125;)</span><br><span class="line">  ],</span><br><span class="line">  <span class="built_in">module</span>: &#123; <span class="comment">// 配置所有第三方loader 模块的</span></span><br><span class="line">    rules: [ <span class="comment">// 第三方模块的匹配规则</span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>] &#125;, <span class="comment">// 处理 CSS 文件的 loader</span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.less$/</span>, <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'less-loader'</span>] &#125;, <span class="comment">// 处理 less 文件的 loader</span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.scss$/</span>, <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>, <span class="string">'sass-loader'</span>] &#125;, <span class="comment">// 处理 scss 文件的 loader</span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.(jpg|png|gif|bmp|jpeg)$/</span>, <span class="attr">use</span>: <span class="string">'url-loader?limit=7631&amp;name=[hash:8]-[name].[ext]'</span> &#125;, <span class="comment">// 处理 图片路径的 loader</span></span><br><span class="line">      <span class="comment">// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串</span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.(ttf|eot|svg|woff|woff2)$/</span>, <span class="attr">use</span>: <span class="string">'url-loader'</span> &#125;, <span class="comment">// 处理 字体文件的 loader </span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.js$/</span>, <span class="attr">use</span>: <span class="string">'babel-loader'</span>, <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span> &#125;, <span class="comment">// 配置 Babel 来转换高级的ES语法</span></span><br><span class="line">      &#123; <span class="attr">test</span>: <span class="regexp">/\.vue$/</span>, <span class="attr">use</span>: <span class="string">'vue-loader'</span> &#125; <span class="comment">// 处理 .vue 文件的 loader</span></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  resolve: &#123;</span><br><span class="line">    alias: &#123; <span class="comment">// 修改 Vue 被导入时候的包的路径</span></span><br><span class="line">      <span class="comment">// "vue$": "vue/dist/vue.js"</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="vue路由"><a href="#vue路由" class="headerlink" title="vue路由"></a>vue路由</h4><h5 id="结合webpack使用vue-router"><a href="#结合webpack使用vue-router" class="headerlink" title="结合webpack使用vue-router"></a>结合webpack使用vue-router</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">main.js</span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> app <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">import</span> account <span class="keyword">from</span> <span class="string">'./main/Account.vue'</span></span><br><span class="line"><span class="keyword">import</span> goodslist <span class="keyword">from</span> <span class="string">'./main/GoodsList.vue'</span></span><br><span class="line"><span class="comment">//如果在一个模块化工程中使用它，必须要通过Vvue.use（）明确地安装路由功能：</span></span><br><span class="line">Vue.use(VueRouter)</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 创建路由对象</span></span><br><span class="line"><span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">    routes:[</span><br><span class="line">        &#123; <span class="attr">path</span>:<span class="string">'/account'</span>,<span class="attr">component</span>:account&#125;,</span><br><span class="line">        &#123; <span class="attr">path</span>:<span class="string">'/goodslist'</span>,<span class="attr">component</span>:goodslist&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">	el:<span class="string">'#app'</span>,</span><br><span class="line">	render:<span class="function"><span class="params">c</span> =&gt;</span> c(app),</span><br><span class="line">    router  </span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">App.vue</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;这是登录组件，使用 .vue 文件定义出来的 --- &#123;&#123;msg&#125;&#125;&lt;<span class="regexp">/h1&gt;</span></span><br><span class="line"><span class="regexp">	</span></span><br><span class="line"><span class="regexp">	&lt;router-link to="/</span>account<span class="string">"&gt;Account&lt;/router-link&gt;</span></span><br><span class="line"><span class="string">	&lt;router-link to="</span>/goodslist<span class="string">"&gt;Goodslist&lt;/router-link&gt;</span></span><br><span class="line"><span class="string">	&lt;router-view&gt;&lt;/router-view&gt;</span></span><br><span class="line"><span class="string">  &lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;/template&gt;  </span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string">export default &#123;</span></span><br><span class="line"><span class="string">  data() &#123;</span></span><br><span class="line"><span class="string">    // 注意：组件中的 data 必须是 function</span></span><br><span class="line"><span class="string">    return &#123;</span></span><br><span class="line"><span class="string">      msg: "</span><span class="number">123</span><span class="string">"</span></span><br><span class="line"><span class="string">    &#125;;</span></span><br><span class="line"><span class="string">  &#125;,</span></span><br><span class="line"><span class="string">  methods: &#123;</span></span><br><span class="line"><span class="string">    show() &#123;</span></span><br><span class="line"><span class="string">      console.log("</span>调用了 login.vue 中的 show 方法<span class="string">");</span></span><br><span class="line"><span class="string">    &#125;</span></span><br><span class="line"><span class="string">  &#125;</span></span><br><span class="line"><span class="string">&#125;;</span></span><br><span class="line"><span class="string"> pp这个组件，是通过VM实例的render 函数，渲染出来的，render 函数如果要渲染组件，渲染出来的组件，只能放到e1：#app'所指定的元素中；I</span></span><br><span class="line"><span class="string">// Account和GoodsList组件，是通过路由匹配监听到的，所以，这两个组件，只能展示到属于路由的&lt;outer-view&gt;&lt;/router-view&gt;中去</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;style&gt;</span></span><br><span class="line"><span class="string">&lt;/style&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">安装 vue-router</span><br><span class="line">npm i vue-router -S</span><br></pre></td></tr></table></figure>

<h5 id="webpack实现children子路由"><a href="#webpack实现children子路由" class="headerlink" title="webpack实现children子路由"></a>webpack实现children子路由</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 创建路由对象</span><br><span class="line">import login form &#39;.&#x2F;submon&#x2F;login.vue&#39;</span><br><span class="line">import register form &#39;.&#x2F;submon&#x2F;register&#39;</span><br><span class="line">var router &#x3D; new VueRouter(&#123;</span><br><span class="line">    routes:[</span><br><span class="line">        &#123; path:&#39;&#x2F;account&#39;,component:account,</span><br><span class="line">        	children:[</span><br><span class="line">        		&#123;path:&#39;login&#39;,component:login&#125;,</span><br><span class="line">        		&#123;path:&#39;register&#39;,component:register&#125;</span><br><span class="line">        	]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123; path:&#39;&#x2F;goodslist&#39;,component:goodslist&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h5 id="组件中style标签lang-设置scss或less-属性和scoped-局部作用域的样式-属性"><a href="#组件中style标签lang-设置scss或less-属性和scoped-局部作用域的样式-属性" class="headerlink" title="组件中style标签lang(设置scss或less)属性和scoped(局部作用域的样式  )属性"></a>组件中style标签lang(设置scss或less)属性和scoped(局部作用域的样式  )属性</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">.vue 文件</span><br><span class="line"></span><br><span class="line">&lt;style&gt; 全局的样式</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;style&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt; 样式应用于当前作用域</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;style&gt;</span><br><span class="line"></span><br><span class="line">&#x2F;*普通的style 标签只支持普通的样式，如果想要启用scss 或1ess，需要为sty1e 元素，设置lang属性*&#x2F;</span><br><span class="line">只要咱们的style标签，是在vue组件中定义的，那么，推荐都为style开启scoped属性</span><br><span class="line"></span><br><span class="line">&lt;style lang&#x3D;&quot;scss&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>

<p>scoped 属性选择器的实现原理</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">样式的scoped 是通过css的属性选择器实现</span><br><span class="line">添加div data-v-53d445f4或者其他属性</span><br></pre></td></tr></table></figure>



<h5 id="抽离路由模块"><a href="#抽离路由模块" class="headerlink" title="抽离路由模块"></a>抽离路由模块</h5><p>新建router.js 文件</p>
<p>把所有的路由代码复制到router.js 文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 导入 自定义路由模块</span><br><span class="line">main.js 文件导入</span><br><span class="line">import router from &#39;.&#x2F;router.js&#39;</span><br></pre></td></tr></table></figure>







<h2 id="相关配置文件"><a href="#相关配置文件" class="headerlink" title="相关配置文件"></a>相关配置文件</h2><h3 id="webpack-config-js-配置文件"><a href="#webpack-config-js-配置文件" class="headerlink" title="webpack.config.js 配置文件"></a>webpack.config.js 配置文件</h3><p><a href="https://webpack.docschina.org/configuration/" target="_blank" rel="noopener">webpack.config.js文件配置</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: path.join(__dirname, <span class="string">'./src/main.js'</span>),</span><br><span class="line">    </span><br><span class="line">    output: &#123;</span><br><span class="line">        path:path.join(__dirname, <span class="string">'./dist/'</span>),</span><br><span class="line">        filename:<span class="string">'bundle.js'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="package-json文件详解"><a href="#package-json文件详解" class="headerlink" title="package.json文件详解"></a><code>package.json文件详解</code></h3><p><a href="https://juejin.im/post/5ebcd8b1e51d454dc20dd8a0" target="_blank" rel="noopener">重新认识 package.json </a></p>
<p><a href="https://github.com/ericdum/mujiang.info/issues/6/" target="_blank" rel="noopener">npm的package.json中文文档 </a></p>
<p>npm命令安装包并将信息保持到项目的package.json文件</p>
<p>重点: <code>npm install &lt;package&gt;</code> 只是下载到本地node_module模块，而不加载到 package.json 文件中</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install &lt;package...&gt; --save <span class="comment"># 写入 dependencies 属性</span></span><br><span class="line">npm install &lt;package...&gt; --save-dev <span class="comment"># 写入 devDependencies 属性</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>devDependencies</code> (开发环境使用) 与 dependencies(生产环境使用) 的区别</p>
<p>devDependencies：devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。 指定了项目开发所需要的模块（开发环境使用）</p>
<p><code>dependencies</code>: 字段指定了项目运行所依赖的模块（生产环境使用）</p>
<p><code>engines</code>有时候，新拉一个项目的时候，由于和其他开发使用的 <code>node</code> 版本不同，导致会出现很多奇奇怪怪的问题（如某些依赖安装报错、依赖安装完项目跑步起来等）<code>package.json</code> 的 <code>engines</code> 字段来指定项目 node 版本</p>
</blockquote>
<ul>
<li>项目名称、项目构建版本、许可证的定义；</li>
<li>依赖定义（包括 <code>dependencies</code> 字段，<code>devDependencies</code> 字段）；</li>
<li>使用<code>scripts</code>字段指定运行脚本命令的 <code>npm</code> 命令行缩写。</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  "name": "my-test", # 项目名称</span><br><span class="line">  "version": "1.0.0", # 项目版本（格式：大版本.次要版本.小版本）</span><br><span class="line">  "description": "", # 项目描述</span><br><span class="line">  "main": "index.js", # 定义入口文件 默认index.js</span><br><span class="line">  "scripts": &#123; # 指定运行脚本命令的 npm 命令行缩写 简化终端命令（scripts）</span><br><span class="line">    "test": "echo \"Error: no test specified\" $$ exit 1"</span><br><span class="line">     <span class="comment">// "dev":"webpack-dev-server --open --port 3000 --hot" # npm run dev</span></span><br><span class="line">    <span class="comment">//   "start": "node index.js" #npm run start</span></span><br><span class="line">  &#125;,</span><br><span class="line">  "keywords": [], # 关键词</span><br><span class="line">  "author": "", # 作者</span><br><span class="line">  "license": "ISC", # 许可证</span><br><span class="line">  "devDependencies": &#123;</span><br><span class="line">    <span class="comment">// 开发环境依赖   npm install 包名 -D</span></span><br><span class="line">   &#125;,</span><br><span class="line">  "dependencies": &#123;</span><br><span class="line">     <span class="comment">// 生产环境依赖   npm install 包名 -S</span></span><br><span class="line">   &#125;,</span><br><span class="line">    "optionalDependencies": &#123;</span><br><span class="line">        "gulp": "^3.9.1"</span><br><span class="line">        <span class="comment">//（可选阶段的依赖）  npm install 包名 -O</span></span><br><span class="line">    &#125;</span><br><span class="line">   "engines": &#123;</span><br><span class="line">       "node": "&gt;= 8.16.0" #指定项目 node 版本（engines）</span><br><span class="line">	   "npm": "&gt;= 6.9.0" #指定适用的 npm 版本</span><br><span class="line">   &#125;,</span><br><span class="line">    "bin": &#123;</span><br><span class="line">      "my-app-cli": "./bin/cli.js"</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>定义项目入口（main）</p>
<ul>
<li><code>main</code> 字段是 <code>package.json</code> 中的另一种元数据功能，它可以用来指定加载的入口文件。假如你的项目是一个 <code>npm</code> 包，当用户安装你的包后，<code>require(&#39;my-module&#39;)</code> 返回的是 <code>main</code> 字段中所列出文件的 <code>module.exports</code> 属性。</li>
<li>当不指定<code>main</code> 字段时，默认值是模块根目录下面的<code>index.js</code> 文件。</li>
</ul>
<p>自定义命令（bin）</p>
<p><code>bin</code> 字段用来指定各个内部命令对应的可执行文件的位置。当<code>package.json</code> 提供了 <code>bin</code> 字段后，即相当于做了一个命令名和本地文件名的映射。</p>
<p>当用户安装带有 <code>bin</code> 字段的包时，</p>
<ul>
<li>如果是全局安装，<code>npm</code> 将会使用符号链接把这些文件链接到<code>/use/local/node_modules/.bin/</code>；</li>
<li>如果是本地安装，会链接到<code>./node_modules/.bin/</code>。</li>
</ul>
<p>举个 🌰，如果要使用 <code>my-app-cli</code> 作为命令时，可以配置以下 <code>bin</code> 字段：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"bin"</span>: &#123;</span><br><span class="line">  <span class="string">"my-app-cli"</span>: <span class="string">"./bin/cli.js"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面代码指定，<code>my-app-cli</code> 命令对应的可执行文件为 <code>bin</code> 子目录下的 <code>cli.js</code>，因此在安装了 <code>my-app-cli</code> 包的项目中，就可以很方便地利用 <code>npm</code>执行脚本：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">  start: &#39;node node_modules&#x2F;.bin&#x2F;my-app-cli&#39;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>咦，怎么看起来和 vue create create-react-app之类的命令不太像？原因：<ul>
<li>当需要 <code>node</code> 环境时就需要加上 <code>node</code> 前缀</li>
<li>如果加上 <code>node</code> 前缀，就需要指定 <code>my-app-cli</code> 的路径 -&gt; <code>node_modules/.bin</code>，否则 <code>node my-app-cli</code>会去查找当前路径下的 <code>my-app-cli.js</code>，这样肯定是不对。</li>
</ul>
</li>
<li>若要实现像 <code>vue create</code>/<code>create-react-app</code>之类的命令一样简便的方式，则可以在上文提到的 <code>bin</code> 子目录下可执行文件<code>cli.js</code> 中的第一行写入以下命令：</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#!/use/bin/env node</span></span><br></pre></td></tr></table></figure>

<ul>
<li>这行命令的作用是告诉系统用 <code>node</code> 解析，这样命令就可以简写成 <code>my-app-cli</code> 了。</li>
</ul>

    </div>

    
    
    
        <div class="reward-container">
  <div></div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.jpg" alt="heweiliang 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/images/alipay.jpg" alt="heweiliang 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"># 前端</a>
              <a href="/tags/webpack/" rel="tag"># webpack</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/03/29/%E9%9D%99%E6%80%81blog/Markdown/Xmind/" rel="prev" title="静态blog/Markdown/Xmind">
      <i class="fa fa-chevron-left"></i> 静态blog/Markdown/Xmind
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/04/04/%E9%9D%A2%E8%AF%95/%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="next" title="面试/面试题">
      面试/面试题 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    
  <div class="comments">
    <div id="lv-container" data-id="city" data-uid="MTAyMC81MDY1MC8yNzEzMw=="></div>
  </div>
  

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#webpack-项目管理工具"><span class="nav-number">1.</span> <span class="nav-text">webpack 项目管理工具</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#学习日志"><span class="nav-number">1.1.</span> <span class="nav-text">学习日志</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#项目构建工具"><span class="nav-number">1.2.</span> <span class="nav-text">项目构建工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#VSCode-插件"><span class="nav-number">1.3.</span> <span class="nav-text">VSCode 插件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack"><span class="nav-number">1.3.0.1.</span> <span class="nav-text">webpack</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack-snippets"><span class="nav-number">1.3.0.2.</span> <span class="nav-text">webpack snippets</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#相关阅读"><span class="nav-number">1.4.</span> <span class="nav-text">相关阅读</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Grunt、Gulp、webpack"><span class="nav-number">1.5.</span> <span class="nav-text">Grunt、Gulp、webpack</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#cnpm-、-npm、-nvm、-yarn-、nrm-命令工具"><span class="nav-number">1.6.</span> <span class="nav-text">cnpm 、 npm、 nvm、 yarn 、nrm 命令工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Node-js的安装"><span class="nav-number">1.7.</span> <span class="nav-text">Node.js的安装</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#node-js-安装"><span class="nav-number">1.7.1.</span> <span class="nav-text">node.js 安装</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#settings-txt文件的配置"><span class="nav-number">1.7.1.1.</span> <span class="nav-text">settings.txt文件的配置</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#环境变量的配置"><span class="nav-number">1.7.1.2.</span> <span class="nav-text">环境变量的配置</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装错误"><span class="nav-number">1.7.2.</span> <span class="nav-text">安装错误</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#nvm常用的命令"><span class="nav-number">1.7.3.</span> <span class="nav-text">nvm常用的命令</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#node-版本"><span class="nav-number">1.7.3.1.</span> <span class="nav-text">node 版本</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#NPM-包管理工具"><span class="nav-number">1.8.</span> <span class="nav-text">NPM 包管理工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#nrm镜像切换地址"><span class="nav-number">1.9.</span> <span class="nav-text">nrm镜像切换地址</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#总结：webpack基本配置"><span class="nav-number">1.10.</span> <span class="nav-text">总结：webpack基本配置</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#安装"><span class="nav-number">1.10.0.1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#运行一-命令行-输入完整路径运行-手动"><span class="nav-number">1.10.0.2.</span> <span class="nav-text">运行一 命令行  输入完整路径运行 手动</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-dev-server"><span class="nav-number">1.10.1.</span> <span class="nav-text">webpack-dev-server</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#运行二：配置webpack-config-js-运行-手动"><span class="nav-number">1.10.1.1.</span> <span class="nav-text">运行二：配置webpack.config.js 运行 手动</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#运行三：配置package-json-script-运行-自动运行"><span class="nav-number">1.10.1.2.</span> <span class="nav-text">运行三：配置package.json script 运行 自动运行</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html-webpack-plugin-配置index主页"><span class="nav-number">1.10.2.</span> <span class="nav-text">html-webpack-plugin 配置index主页</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#loader-导入其他文件"><span class="nav-number">1.10.2.1.</span> <span class="nav-text">loader  导入其他文件</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字体"><span class="nav-number">1.11.</span> <span class="nav-text">字体</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack安装的工具"><span class="nav-number">1.12.</span> <span class="nav-text">webpack安装的工具</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack-概念的引入"><span class="nav-number">1.13.</span> <span class="nav-text">webpack-概念的引入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#网页中会引用那些常用的静态资源"><span class="nav-number">1.13.1.</span> <span class="nav-text">网页中会引用那些常用的静态资源</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#网页引用静态资源多了以后有什么问题"><span class="nav-number">1.13.2.</span> <span class="nav-text">网页引用静态资源多了以后有什么问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解决问题"><span class="nav-number">1.13.3.</span> <span class="nav-text">解决问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解决上述的2种解决方案"><span class="nav-number">1.13.4.</span> <span class="nav-text">解决上述的2种解决方案</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack目录"><span class="nav-number">1.13.5.</span> <span class="nav-text">webpack目录</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webpack最基本知识"><span class="nav-number">1.14.</span> <span class="nav-text">webpack最基本知识</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是webpack"><span class="nav-number">1.14.1.</span> <span class="nav-text">什么是webpack</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webapack最基本的配置文件的使用"><span class="nav-number">1.14.2.</span> <span class="nav-text">webapack最基本的配置文件的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack-config-js"><span class="nav-number">1.14.2.1.</span> <span class="nav-text">webpack.config.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack运行命令行"><span class="nav-number">1.14.2.2.</span> <span class="nav-text">webpack运行命令行</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#package-json"><span class="nav-number">1.14.2.3.</span> <span class="nav-text">package.json</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack之plugin配置和使用"><span class="nav-number">1.14.3.</span> <span class="nav-text">webpack之plugin配置和使用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack-dev-server插件-自动运行项目"><span class="nav-number">1.14.3.1.</span> <span class="nav-text">webpack-dev-server插件 自动运行项目</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#webpack-dev-server的常用命令"><span class="nav-number">1.14.3.1.0.1.</span> <span class="nav-text">webpack-dev-server的常用命令</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#webpack-dev-server的配置命令的"><span class="nav-number">1.14.3.1.0.2.</span> <span class="nav-text">webpack-dev-server的配置命令的</span></a></li></ol></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack-dev-server报错1"><span class="nav-number">1.14.3.2.</span> <span class="nav-text">webpack-dev-server报错1</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack-dev-server报错2"><span class="nav-number">1.14.3.3.</span> <span class="nav-text">webpack-dev-server报错2</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#html-webpack-plugin插件-在内存中生成主页-自动追加页面到主页"><span class="nav-number">1.14.3.4.</span> <span class="nav-text">html-webpack-plugin插件 在内存中生成主页&#x2F; 自动追加页面到主页</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#html-webpack-plugin插件的两个基本操作"><span class="nav-number">1.14.3.4.0.1.</span> <span class="nav-text">html-webpack-plugin插件的两个基本操作</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#loader加载器"><span class="nav-number">1.14.4.</span> <span class="nav-text">loader加载器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#loader配置和使用-引入-JS（webpack-默认部分）、CSS-less-scss-、图片-、字体"><span class="nav-number">1.14.5.</span> <span class="nav-text">loader配置和使用  引入 JS（webpack 默认部分）、CSS(less,scss) 、图片  、字体</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#一、CSS-less、scss"><span class="nav-number">1.14.5.1.</span> <span class="nav-text">一、CSS(less、scss)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#css-、less、scss、字体"><span class="nav-number">1.14.5.2.</span> <span class="nav-text">css 、less、scss、字体</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#loader配置处理css样式表的第三方loader"><span class="nav-number">1.14.5.3.</span> <span class="nav-text">loader配置处理css样式表的第三方loader</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#loader配置处理less文件的loader"><span class="nav-number">1.14.5.4.</span> <span class="nav-text">loader配置处理less文件的loader</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#loader配置处理scss文件的loader"><span class="nav-number">1.14.5.5.</span> <span class="nav-text">loader配置处理scss文件的loader</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#二、字体"><span class="nav-number">1.14.5.6.</span> <span class="nav-text">二、字体</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#webpack中使用url-loader处理字体"><span class="nav-number">1.14.5.7.</span> <span class="nav-text">webpack中使用url-loader处理字体</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#三、图片"><span class="nav-number">1.14.5.8.</span> <span class="nav-text">三、图片</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#四、JS文件（ES6-ES7及以上的高级语法）、-webpack中的babel的配置"><span class="nav-number">1.14.5.9.</span> <span class="nav-text">四、JS文件（ES6\ES7及以上的高级语法）、 webpack中的babel的配置</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-Vue结合"><span class="nav-number">1.14.6.</span> <span class="nav-text">webpack + Vue结合</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#在普通页面中使用render函数渲染组件"><span class="nav-number">1.14.6.1.</span> <span class="nav-text">在普通页面中使用render函数渲染组件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#render的几种写法"><span class="nav-number">1.14.6.2.</span> <span class="nav-text">render的几种写法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#如何在webpack中构建项目中，使用Vue进行开发"><span class="nav-number">1.14.6.3.</span> <span class="nav-text">如何在webpack中构建项目中，使用Vue进行开发</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#在普通网页中如何使用vue"><span class="nav-number">1.14.6.3.1.</span> <span class="nav-text">在普通网页中如何使用vue</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#在webpack中如何使用vue"><span class="nav-number">1.14.6.3.2.</span> <span class="nav-text">在webpack中如何使用vue</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#在webpack中配置-vue-组件页面的解析"><span class="nav-number">1.14.6.3.3.</span> <span class="nav-text">在webpack中配置.vue 组件页面的解析</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#vue组件由三个部分构成-template-script-style"><span class="nav-number">1.14.6.3.4.</span> <span class="nav-text">vue组件由三个部分构成 template script style</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#export-default-和-export的使用方式"><span class="nav-number">1.14.6.4.</span> <span class="nav-text">export default 和 export的使用方式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#总结梳理：webpack中如何使用yue："><span class="nav-number">1.14.6.5.</span> <span class="nav-text">总结梳理：webpack中如何使用yue：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vue路由"><span class="nav-number">1.14.6.6.</span> <span class="nav-text">vue路由</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#结合webpack使用vue-router"><span class="nav-number">1.14.6.6.1.</span> <span class="nav-text">结合webpack使用vue-router</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#webpack实现children子路由"><span class="nav-number">1.14.6.6.2.</span> <span class="nav-text">webpack实现children子路由</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#组件中style标签lang-设置scss或less-属性和scoped-局部作用域的样式-属性"><span class="nav-number">1.14.6.6.3.</span> <span class="nav-text">组件中style标签lang(设置scss或less)属性和scoped(局部作用域的样式  )属性</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#抽离路由模块"><span class="nav-number">1.14.6.6.4.</span> <span class="nav-text">抽离路由模块</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#相关配置文件"><span class="nav-number">1.15.</span> <span class="nav-text">相关配置文件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#webpack-config-js-配置文件"><span class="nav-number">1.15.1.</span> <span class="nav-text">webpack.config.js 配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#package-json文件详解"><span class="nav-number">1.15.2.</span> <span class="nav-text">package.json文件详解</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="heweiliang"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">heweiliang</p>
  <div class="site-description" itemprop="description">heweiliang blog</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">96</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-google"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title2</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title3</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">heweiliang</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">376k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">5:42</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/three-waves.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  

<script>
NexT.utils.loadComments(document.querySelector('#lv-container'), () => {
  window.livereOptions = {
    refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
  };
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];
    if (typeof LivereTower === 'function') { return; }
    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;
    e.parentNode.insertBefore(j, e);
  })(document, 'script');
});
</script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/Epsilon2.1.model.json"},"display":{"position":"left","width":300,"height":600},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
